<!DOCTYPE html>




<html class="theme-next pisces" lang="zh-CN">
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">













<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">


















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">


<link href="https://fonts.loli.net/css?family=EB+Garamond:400,400i,700,700i|Noto+Serif+SC:400,500,700&display=swap&subset=chinese-simplified" rel="stylesheet">




  

<link href="//cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo,">





  <link rel="alternate" href="/atom.xml" title="孔明の博客" type="application/atom+xml">






<meta name="description" content="更换主题模板，实现个性化定制">
<meta name="keywords" content="Hexo">
<meta property="og:type" content="article">
<meta property="og:title" content="Hexo+GitHub+matery博客美化教程">
<meta property="og:url" content="https://gkm0120.github.io/p/57315.html">
<meta property="og:site_name" content="孔明の博客">
<meta property="og:description" content="更换主题模板，实现个性化定制">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/14.png">
<meta property="og:image" content="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/15.png">
<meta property="og:image" content="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/17.png">
<meta property="og:updated_time" content="2021-04-06T13:32:31.528Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo+GitHub+matery博客美化教程">
<meta name="twitter:description" content="更换主题模板，实现个性化定制">
<meta name="twitter:image" content="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/14.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Pisces',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":true,"onmobile":true},
    fancybox: true,
    tabs: true,
    motion: {"enable":false,"async":false,"transition":{"post_block":"flipYIn","post_header":"perspectiveRightIn","post_body":"perspectiveLeftIn","coll_header":"perspectiveDownIn","sidebar":"perspectiveUpIn"}},
    duoshuo: {
      userId: '0',
      author: 'Author'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://gkm0120.github.io/p/57315.html">





<!-- 设置文章需要密码访问 -->
<script>
    (function(){
        if(''){
            if (prompt('请输入文章密码') !== ''){
                alert('密码错误！');
                history.back();
            }
        }
    })();
</script>

  <title>Hexo+GitHub+matery博客美化教程 | 孔明の博客</title>

  

  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css">
<link rel="stylesheet" href="/css/prism-line-numbers.css" type="text/css"></head>

<body itemscope itemtype="http://schema.org/WebPage" lang="zh-CN">

  

  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <!--fork me from github-->
    <a href="https://github.com/gkm0120" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewbox="0 0 250 250" style="fill:#64CEAA; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"/><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"/><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"/></svg></a><style>.github-corner:hover .octo-arm{animation:octocat-wave 560ms ease-in-out}@keyframes octocat-wave{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-25deg)}40%,80%{transform:rotate(10deg)}}@media (max-width:500px){.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{animation:octocat-wave 560ms ease-in-out}}</style>

    <header id="header" class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">孔明の博客</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <h1 class="site-subtitle" itemprop="description"></h1>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            Home
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            Archives
          </a>
        </li>
      

      
        <li class="menu-item menu-item-search">
          
            <a href="javascript:;" class="popup-trigger">
          
            
              <i class="menu-item-icon fa fa-search fa-fw"></i> <br>
            
            Search
          </a>
        </li>
      
    </ul>
  

  
    <div class="site-search">
      
  <div class="popup search-popup local-search-popup">
  <div class="local-search-header clearfix">
    <span class="search-icon">
      <i class="fa fa-search"></i>
    </span>
    <span class="popup-btn-close">
      <i class="fa fa-times-circle"></i>
    </span>
    <div class="local-search-input-wrapper">
      <input autocomplete="off" placeholder="Searching..." spellcheck="false" type="text" id="local-search-input">
    </div>
  </div>
  <div id="local-search-result"></div>
</div>



    </div>
  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://gkm0120.github.io/p/57315.html">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="name" content="戈孔明">
      <meta itemprop="description" content>
      <meta itemprop="image" content="/images/avatar.png">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="孔明の博客">
    </span>

    
      <header class="post-header">

        
        
          <h2 class="post-title" itemprop="name headline">Hexo+GitHub+matery博客美化教程</h2>
        

        <div class="post-meta">
          <span class="post-time">

             

             

            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">Posted on</span>
              
              <time title="Post created" itemprop="dateCreated datePublished" datetime="2020-03-21T23:48:07+08:00">
                2020-03-21
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">In</span>
              
              
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/categories/博客搭建/" itemprop="url" rel="index">
                    <span itemprop="name">博客搭建</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
          

          
          

          <!--
          
          -->

          
            <span class="post-wordcount">
              
                
                  <span class="post-meta-divider">|</span>
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                <span title="Words count in article">
                  11k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                <span title="Reading time">
                  56 分钟
                </span>
              
            </span>
          

          <!-- 隐藏文章内标题下，内容描述
          
          -->

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>更换主题模板，实现个性化定制</p>
<a id="more"></a>

<h2 id="定制"><a href="#定制" class="headerlink" title="定制"></a>定制</h2><p>我们要定制自己的博客的话，首先就要来了解一下Hexo博客的一些目录和文件的作用，以及如何平滑更换漂亮的主题模板并加入自己的定制源代码实现个性化定制</p>
<h3 id="1-Hexo相关目录文件"><a href="#1-Hexo相关目录文件" class="headerlink" title="1. Hexo相关目录文件"></a>1. Hexo相关目录文件</h3><h4 id="1-1-博客目录构成介绍"><a href="#1-1-博客目录构成介绍" class="headerlink" title="1.1 博客目录构成介绍"></a>1.1 博客目录构成介绍</h4><p>从上图可以看出，博客的目录结构如下：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">- node_modules</span><br><span class="line">- public</span><br><span class="line">- scaffolds</span><br><span class="line">- source</span><br><span class="line">  - _data</span><br><span class="line">  - _posts</span><br><span class="line">  - about</span><br><span class="line">  - archives</span><br><span class="line">  - categories</span><br><span class="line">  - friends</span><br><span class="line">  - tags</span><br><span class="line">- themes</span><br></pre></td></tr></tbody></table></figure></div>

<p>node_modules是node.js各种库的目录，public是生成的网页文件目录，scaffolds里面就三个文件，存储着新文章和新页面的初始设置，source是我们最常用到的一个目录，里面存放着文章、各类页面、图像等文件，themes存放着主题文件，一般也用不到。<br>我们平时写文章只需要关注source/_posts这个文件夹就行了。</p>
<hr>
<h4 id="1-2-hexo基本配置"><a href="#1-2-hexo基本配置" class="headerlink" title="1.2 hexo基本配置"></a>1.2 hexo基本配置</h4><p>在文件根目录下的_config.yml，就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细可参考官方的<a href="https://hexo.io/zh-cn/docs/configuration" target="_blank" rel="noopener">配置描述</a>。</p>
<h5 id="1-2-1-网站"><a href="#1-2-1-网站" class="headerlink" title="1.2.1 网站"></a>1.2.1 网站</h5><p>参数描述<code>title</code>网站标题<code>subtitle</code>网站副标题<code>description</code>网站描述<code>author</code>您的名字<code>language</code>网站使用的语言<code>timezone</code>网站时区。<code>Hexo</code>默认使用您电脑的时区。时区列表。比如说：<code>America/New_York</code>,<code>Japan</code>, 和<code>UTC</code>。</p>
<p>其中，<code>description</code>主要用于<code>SEO</code>，告诉搜索引擎一个关于您站点的简单描述，通常建议在其中包含您网站的关键词。<code>author</code>参数用于主题显示文章的作者。</p>
<h5 id="1-2-2-网址"><a href="#1-2-2-网址" class="headerlink" title="1.2.2 网址"></a>1.2.2 网址</h5><p>参数描述<code>url</code>网址<code>root</code>网站根目录<code>permalink</code>文章的永久链接格式<code>permalink_defaults</code>永久链接中各部分的默认值<br>在这里，你需要把url改成你的网站域名。<br><code>permalink</code>，也就是你生成某个文章时的那个链接格式。<br>比如我新建一个文章叫<code>temp.md</code>，那么这个时候他自动生成的地址就是<a href="https://yoursite.com/2018/09/05/temp" target="_blank" rel="noopener">https://yoursite.com/2018/09/05/temp</a> 。<br>以下是官方给出的示例，关于链接的变量还有很多，需要的可以去官网上查找<a href="https://hexo.io/zh-cn/docs/permalinks" target="_blank" rel="noopener">永久链接</a>。</p>
<blockquote>
<p>参数结果:year/:month/:day/:title/2019/08/10/hello-world :year-:month-:day-:title.html 2019-08-10-hello-world.html :category/:titlefoo/bar/hello-world<br>再往下翻，中间这些都默认就好了。</p>
</blockquote>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">theme: landscap</span><br></pre></td></tr></tbody></table></figure></div>

<p><code>theme</code>就是选择什么主题，也就是在<code>themes</code>这个文件夹下，在官网上有很多个主题，默认给你安装的是<code>lanscape</code>这个主题。当你需要更换主题时，在官网上下载，把主题的文件放在<code>themes</code>文件夹下，再修改这个主题参数就可以了。</p>
<h5 id="1-2-3-Front-matter"><a href="#1-2-3-Front-matter" class="headerlink" title="1.2.3 Front-matter"></a>1.2.3 Front-matter</h5><p><code>Front-matter</code>是<code>md</code>文件最上方以<code>---</code>分隔的区域，用于指定个别文件的变量，举例来说：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">title: Hexo+Github博客搭建记录</span><br><span class="line">date: 2019-08-10 21:44:44</span><br></pre></td></tr></tbody></table></figure></div>

<p>下是预先定义的参数，您可在模板中使用这些参数值并加以利用。<br>参数描述<code>layout</code>布局<code>title</code>标题<code>date</code>建立日期<code>updated</code>更新日期<code>comments</code>开启文章的评论功能<code>tags</code>标签（不适用于分页）<code>categories</code>分类（不适用于分页）<code>permalink</code>覆盖文章网址<br>其中，分类和标签需要区别一下，分类具有顺序性和层次性，也就是说<code>Foo</code>，<code>Bar</code>不等于<code>Bar</code>，<code>Foo</code>；而标签没有顺序和层次。</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line">---</span><br><span class="line">title: Hexo+Github博客搭建记录</span><br><span class="line">date: 2020-03-21 23:48:07</span><br><span class="line">author: 孔明</span><br><span class="line">img: /medias/banner/7.jpg</span><br><span class="line">coverImg: /medias/banner/7.jpg</span><br><span class="line">top: true</span><br><span class="line">cover: true</span><br><span class="line">toc: true</span><br><span class="line">password: 5f15b28ffe43f8be4f239bdd9b69af9d80dbafcb20a5f0df5d1677a120ae9110</span><br><span class="line">mathjax: true</span><br><span class="line">summary: 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要</span><br><span class="line">tags:</span><br><span class="line">- Hexo</span><br><span class="line">- Github</span><br><span class="line">- 博客</span><br><span class="line">categories:</span><br><span class="line">- 软件安装与配置</span><br><span class="line">---</span><br></pre></td></tr></tbody></table></figure></div>

<h5 id="1-2-4-layout-布局"><a href="#1-2-4-layout-布局" class="headerlink" title="1.2.4 layout(布局)"></a>1.2.4 layout(布局)</h5><p><strong>1.2.4.1 post</strong><br>当你每一次使用代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new XXX</span><br></pre></td></tr></tbody></table></figure></div>

<p>它其实默认使用的是<code>post</code>这个布局，也就是在<code>source</code>文件夹下的<code>_post</code>里面。</p>
<p><code>Hexo</code>有三种默认布局：<code>post</code>、<code>page</code>和<code>draft</code>，它们分别对应不同的路径，而您自定义的其他布局和<code>post</code>相同，都将储存到<code>source/_posts</code>文件夹。</p>
<p>而new这个命令其实是：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new [layout] &lt;title&gt;</span><br></pre></td></tr></tbody></table></figure></div>

<p>只不过这个layout默认是post罢了。</p>
<p><strong>1.2.4.2 page</strong></p>
<p>如果你想另起一页，那么可以使用</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new page newpage</span><br></pre></td></tr></tbody></table></figure></div>

<p>系统会自动给你在source文件夹下创建一个<code>newpage</code>文件夹，以及<code>newpage</code>文件夹中的<code>index.md</code>，这样你访问的<code>newpage</code>对应的链接就是<a href="https://xxx.xxx/newpage" target="_blank" rel="noopener">https://xxx.xxx/newpage</a></p>
<p><strong>1.2.4.3 draft</strong></p>
<p><code>draft</code>是草稿的意思，也就是你如果想写文章，又不希望被看到，那么可以</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo new draft newdraft</span><br></pre></td></tr></tbody></table></figure></div>

<p>这样会在<code>source/_draft</code>中新建一个<code>newdraft.md</code>文件，如果你的草稿文件写的过程中，想要预览一下，那么可以使用</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo server --draft</span><br></pre></td></tr></tbody></table></figure></div>

<p>在本地端口中开启服务预览。<br>如果你的草稿文件写完了，想要发表到<code>post</code>中，</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">hexo publish draft newdraft</span><br></pre></td></tr></tbody></table></figure></div>

<p>就会自动把<code>newdraft.md</code>发送到<code>post</code>中。</p>
<h3 id="2-更换主题"><a href="#2-更换主题" class="headerlink" title="2. 更换主题"></a>2. 更换主题</h3><p>我们在了解<code>Hexo</code>博客文件基础之后，知道主题文件就放在<code>themes</code>文件下，那么我们就可以去<code>Hexo</code>官网下载喜欢的主题，复制进去然后修改参数即可。<br>网上大多数主题都是github排名第一的<code>Next</code>主题，网上看到一个主题感觉还不错：<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank" rel="noopener">hexo-theme-matery</a>，地址在<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank" rel="noopener">传送门</a>。这个主题看着比较漂亮，并且响应式比较友好，点起来很舒服，功能也比较很多。</p>
<blockquote>
<p>特性：</p>
</blockquote>
<ul>
<li>简单漂亮，文章内容美观易读</li>
<li>Material Design 设计</li>
<li>响应式设计，博客在桌面端、平板、手机等设备上均能很好的展现</li>
<li>首页轮播文章及每天动态切换 Banner 图片</li>
<li>瀑布流式的博客文章列表（文章无特色图片时会有 24 张漂亮的图片代替）</li>
<li>时间轴式的归档页</li>
<li>词云的标签页和雷达图的分类页</li>
<li>丰富的关于我页面（包括关于我、文章统计图、我的项目、我的技能、相册等）</li>
<li>可自定义的数据的友情链接页面</li>
<li>支持文章置顶和文章打赏</li>
<li>支持 MathJax</li>
<li>TOC 目录</li>
<li>可设置复制文章内容时追加版权信息</li>
<li>可设置阅读文章时做密码验证</li>
<li>Gitalk、Gitment、Valine 和 Disqus 评论模块（推荐使用 Gitalk）</li>
<li>集成了不蒜子统计、谷歌分析（Google Analytics）和文章字数统计等功能</li>
<li>支持在首页的音乐播放和视频播放功能</li>
<li>他的介绍文档写得非常的详细，还有中英文两个版本。效果图如下：</li>
</ul>
<p>首先先按照文档教程安装一遍主题，然后是可以正常打开的，如果你是一般使用的话，基本没啥问题了。不过有些地方有些地方可以根据你自己的习惯和喜好修改一下， 下面记录一下我这个博客修改了的一些地方。</p>
<h4 id="2-1-新建文章模板修改"><a href="#2-1-新建文章模板修改" class="headerlink" title="2.1 新建文章模板修改"></a>2.1 新建文章模板修改</h4><p>首先为了新建文章方便，我们可以修改一下文章模板，建议将<code>/scaffolds/post.md</code>修改为如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">title: {{ title }}</span><br><span class="line">date: {{date }}</span><br><span class="line">author:</span><br><span class="line">img:</span><br><span class="line">coverImg:</span><br><span class="line">top: false</span><br><span class="line">cover: false</span><br><span class="line">toc: true</span><br><span class="line">mathjax: false</span><br><span class="line">password:</span><br><span class="line">summary:</span><br><span class="line">tags:</span><br><span class="line">categories:</span><br></pre></td></tr></tbody></table></figure></div>

<p>这样新建文章后 一些<code>Front-matter</code>参数不用你自己补充了，修改对应信息就可以了。</p>
<h4 id="2-2-添加404页面"><a href="#2-2-添加404页面" class="headerlink" title="2.2 添加404页面"></a>2.2 添加404页面</h4><p>原来的主题没有<code>404</code>页面，我们加一个。首先在<code>/source/</code>目录下新建一个<code>404.md</code>，内容如下：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">title: 404</span><br><span class="line">date: 2019-08-5 16:41:10</span><br><span class="line">type: "404"</span><br><span class="line">layout: "404"</span><br><span class="line">description: "Oops～，我崩溃了！找不到你想要的页面 :("</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在/themes/matery/layout/目录下新建一个404.ejs文件，内容如下：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">style</span> <span class="attr">type</span>=<span class="string">"text/css"</span>&gt;</span></span><br><span class="line"><span class="css">    <span class="comment">/* don't remove. */</span></span></span><br><span class="line"><span class="css">    <span class="selector-class">.about-cover</span> {</span></span><br><span class="line">        height: 75vh;</span><br><span class="line">    }</span><br><span class="line"><span class="tag">&lt;/<span class="name">style</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"bg-cover pd-header about-cover"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"container"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"row"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"col s10 offset-s1 m8 offset-m2 l8 offset-l2"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"brand"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"title center-align"</span>&gt;</span></span><br><span class="line">                        404</span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"description center-align"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">%=</span> <span class="attr">page.description</span> %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">// 每天切换 banner 图.  Switch banner image every day.</span></span></span><br><span class="line"><span class="javascript">    $(<span class="string">'.bg-cover'</span>).css(<span class="string">'background-image'</span>, <span class="string">'url(/medias/banner/'</span> + <span class="keyword">new</span> <span class="built_in">Date</span>().getDay() + <span class="string">'.jpg)'</span>);</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-3-关于页面增加简历"><a href="#2-3-关于页面增加简历" class="headerlink" title="2.3 关于页面增加简历"></a>2.3 关于页面增加简历</h4><p>修改<code>/themes/matery/layout/about.ejs</code>，找到<code>&lt;div class="card"&gt;</code>标签，然后找到它对应的<code>&lt;/div&gt;</code>标签，接在后面新增一个<code>card</code>，语句如下：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-content"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"card-content article-card-content"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"title center-align"</span> <span class="attr">data-aos</span>=<span class="string">"zoom-in-up"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-address-book"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span>&amp;nbsp;&amp;nbsp;<span class="tag">&lt;<span class="name">%-</span> <span class="attr">__</span>('<span class="attr">myCV</span>') %&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"articleContent"</span> <span class="attr">data-aos</span>=<span class="string">"fade-up"</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%-</span> <span class="attr">page.content</span> %&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>这样就会多出一张<code>card</code>，然后可以在<code>/source/about/index.md</code>下面写上你的简历了，当然这里的位置随你自己设置，你也可以把简历作为第一个<code>card</code>。</p>
<h4 id="2-4-数学公式渲染和代码高亮"><a href="#2-4-数学公式渲染和代码高亮" class="headerlink" title="2.4 数学公式渲染和代码高亮"></a>2.4 数学公式渲染和代码高亮</h4><h5 id="2-4-1-解决mathjax与代码高亮的冲突"><a href="#2-4-1-解决mathjax与代码高亮的冲突" class="headerlink" title="2.4.1 解决mathjax与代码高亮的冲突"></a>2.4.1 解决mathjax与代码高亮的冲突</h5><p>如果你按照教程安装了代码高亮插件hexo-prism-plugin，单独使用是没有问题的，但如果你又使用了mathjax，并且按照网上教程，安装kramed插件并修改了js文件里的正则表达式（为了解决markdown和mathjax的语法冲突），那你的代码就无法高亮了。解决方法很简单，别用kramed插件了，还用原来自带的marked插件，直接改它的正则表达式就行了。</p>
<h5 id="2-4-2-加数学公式显示"><a href="#2-4-2-加数学公式显示" class="headerlink" title="2.4.2 加数学公式显示"></a>2.4.2 加数学公式显示</h5><p>打开<code>/themes/matery/layout</code>中的<code>post.ejs</code>文件，在最下方粘贴如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>由于<code>markdown</code>语法与<code>mathjax</code>语法存在冲突，所以还需要修改源文件。<br>打开<code>/node_modules/marked/lib</code>中的<code>marked.js</code>文件，第539行的<code>escape:</code>处替换成：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="MARKDOWN"><figure class="iseeu highlight /markdown"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">escape: /^$[<span class="string">`*\[\</span>](<span class="link"></span>)#$+\-.!_&gt;])/</span><br></pre></td></tr></tbody></table></figure></div>

<p>第553行的em:处替换成：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="TAGGERSCRIPT"><figure class="iseeu highlight /taggerscript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">em: /^<span class="symbol">\*</span>((?:<span class="symbol">\*</span><span class="symbol">\*</span>|[<span class="symbol">\s</span><span class="symbol">\S</span>])+?)<span class="symbol">\*</span>(?!<span class="symbol">\*</span>)/</span><br></pre></td></tr></tbody></table></figure></div>

<p>这时在文章里写数学公式基本没有问题了，但是要注意：<br><strong>数学公式中如果出现了连续两个{，中间一定要加空格！</strong></p>
<p>举个例子:<br>行内公式：$y=f(x)$<br>代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="GAMS"><figure class="iseeu highlight /gams"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta"><span class="meta-keyword">$y</span> = f(x)$</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>行间公式：<br>\[y = {f_{ {g_1}}}(x)\]<br>代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="LIVESCRIPT"><figure class="iseeu highlight /livescript"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="string">\\[y</span> = {f_{ {g_1}}}(x)<span class="string">\\]</span></span><br></pre></td></tr></tbody></table></figure></div>

<blockquote>
<p>注意上面花括号之间有空格！</p>
</blockquote>
<h4 id="2-5-增加建站时间"><a href="#2-5-增加建站时间" class="headerlink" title="2.5 增加建站时间"></a>2.5 增加建站时间</h4><p>修改<code>/themes/matery/layout/_partial</code>中的<code>footer.ejs</code>，在最后加上：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">language</span>=<span class="string">javascript</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="function"><span class="keyword">function</span> <span class="title">siteTime</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="javascript">        <span class="built_in">window</span>.setTimeout(<span class="string">"siteTime()"</span>, <span class="number">1000</span>);</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> seconds = <span class="number">1000</span>;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> minutes = seconds * <span class="number">60</span>;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> hours = minutes * <span class="number">60</span>;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> days = hours * <span class="number">24</span>;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> years = days * <span class="number">365</span>;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> today = <span class="keyword">new</span> <span class="built_in">Date</span>();</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todayYear = today.getFullYear();</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todayMonth = today.getMonth() + <span class="number">1</span>;</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todayDate = today.getDate();</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todayHour = today.getHours();</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todayMinute = today.getMinutes();</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> todaySecond = today.getSeconds();</span></span><br><span class="line">        /* Date.UTC() -- 返回date对象距世界标准时间(UTC)1970年1月1日午夜之间的毫秒数(时间戳)</span><br><span class="line">        year - 作为date对象的年份，为4位年份值</span><br><span class="line">        month - 0-11之间的整数，做为date对象的月份</span><br><span class="line">        day - 1-31之间的整数，做为date对象的天数</span><br><span class="line">        hours - 0(午夜24点)-23之间的整数，做为date对象的小时数</span><br><span class="line">        minutes - 0-59之间的整数，做为date对象的分钟数</span><br><span class="line">        seconds - 0-59之间的整数，做为date对象的秒数</span><br><span class="line">        microseconds - 0-999之间的整数，做为date对象的毫秒数 */</span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> t1 = <span class="built_in">Date</span>.UTC(<span class="number">2020</span>, <span class="number">03</span>, <span class="number">15</span>, <span class="number">00</span>, <span class="number">00</span>, <span class="number">00</span>); <span class="comment">//北京时间2020-3-15 00:00:00</span></span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> t2 = <span class="built_in">Date</span>.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);</span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> diff = t2 - t1;</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> diffYears = <span class="built_in">Math</span>.floor(diff / years);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> diffDays = <span class="built_in">Math</span>.floor((diff / days) - diffYears * <span class="number">365</span>);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> diffHours = <span class="built_in">Math</span>.floor((diff - (diffYears * <span class="number">365</span> + diffDays) * days) / hours);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> diffMinutes = <span class="built_in">Math</span>.floor((diff - (diffYears * <span class="number">365</span> + diffDays) * days - diffHours * hours) / minutes);</span></span><br><span class="line"><span class="javascript">        <span class="keyword">var</span> diffSeconds = <span class="built_in">Math</span>.floor((diff - (diffYears * <span class="number">365</span> + diffDays) * days - diffHours * hours - diffMinutes * minutes) / seconds);</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.getElementById(<span class="string">"sitetime"</span>).innerHTML = <span class="string">"本站已运行 "</span> +diffYears+<span class="string">" 年 "</span>+diffDays + <span class="string">" 天 "</span> + diffHours + <span class="string">" 小时 "</span> + diffMinutes + <span class="string">" 分钟 "</span> + diffSeconds + <span class="string">" 秒"</span>;</span></span><br><span class="line"><span class="actionscript">    }<span class="comment">/*因为建站时间还没有一年，就将之注释掉了。需要的可以取消*/</span></span></span><br><span class="line">    siteTime();</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在合适的地方（比如<code>copyright</code>声明后面）加上下面的代码就行了：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"sitetime"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-6-修改不蒜子初始化计数"><a href="#2-6-修改不蒜子初始化计数" class="headerlink" title="2.6 修改不蒜子初始化计数"></a>2.6 修改不蒜子初始化计数</h4><p>因为不蒜子至今未开放注册，所以没办法在官网修改初始化，只能自己动手了。和上一条一样，我们在<code>/themes/matery/layout/_partial</code>里的<code>footer.ejs</code>文件最后加上：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="javascript">    $(<span class="built_in">document</span>).ready(<span class="function"><span class="keyword">function</span> (<span class="params"></span>)</span>{</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> int = setInterval(fixCount, <span class="number">50</span>);  <span class="comment">// 50ms周期检测函数</span></span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> pvcountOffset = <span class="number">80000</span>;  <span class="comment">// 初始化首次数据</span></span></span><br><span class="line"><span class="actionscript">        <span class="keyword">var</span> uvcountOffset = <span class="number">20000</span>;</span></span><br><span class="line"></span><br><span class="line"><span class="actionscript">        <span class="function"><span class="keyword">function</span> <span class="title">fixCount</span><span class="params">()</span> </span>{</span></span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> (<span class="built_in">document</span>.getElementById(<span class="string">"busuanzi_container_site_pv"</span>).style.display != <span class="string">"none"</span>) {</span></span><br><span class="line"><span class="javascript">                $(<span class="string">"#busuanzi_value_site_pv"</span>).html(<span class="built_in">parseInt</span>($(<span class="string">"#busuanzi_value_site_pv"</span>).html()) + pvcountOffset);</span></span><br><span class="line">                clearInterval(int);</span><br><span class="line">            }</span><br><span class="line"><span class="javascript">            <span class="keyword">if</span> ($(<span class="string">"#busuanzi_container_site_pv"</span>).css(<span class="string">"display"</span>) != <span class="string">"none"</span>) {</span></span><br><span class="line"><span class="javascript">                $(<span class="string">"#busuanzi_value_site_uv"</span>).html(<span class="built_in">parseInt</span>($(<span class="string">"#busuanzi_value_site_uv"</span>).html()) + uvcountOffset); <span class="comment">// 加上初始数据</span></span></span><br><span class="line"><span class="actionscript">                clearInterval(int); <span class="comment">// 停止检测</span></span></span><br><span class="line">            }</span><br><span class="line">        }</span><br><span class="line">    });</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>然后把上面几行有段代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.totalTraffic</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-heart-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        本站总访问量 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.totalNumberOfvisitors</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span>&gt;</span></span><br><span class="line">        人次,&amp;nbsp;访客数 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> 人.</span><br><span class="line">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>修改为：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="ERB"><figure class="iseeu highlight /erb"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">%</span></span></span><span class="ruby"> <span class="keyword">if</span> (theme.busuanziStatistics &amp;&amp; theme.busuanziStatistics.totalTraffic) { </span><span class="xml"><span class="tag">%&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>&gt;</span></span></span><br><span class="line"><span class="xml">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-heart-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span></span><br><span class="line"><span class="xml">        本站总访问量 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">%</span></span></span><span class="ruby"> } </span><span class="xml"><span class="tag">%&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">%</span></span></span><span class="ruby"> <span class="keyword">if</span> (theme.busuanziStatistics &amp;&amp; theme.busuanziStatistics.totalNumberOfvisitors) { </span><span class="xml"><span class="tag">%&gt;</span></span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>&gt;</span></span></span><br><span class="line"><span class="xml">        人次,&amp;nbsp;访客数 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> 人.</span></span><br><span class="line"><span class="xml">    <span class="tag">&lt;/<span class="name">span</span>&gt;</span></span></span><br><span class="line"><span class="xml"><span class="tag">&lt;<span class="name">%</span></span></span><span class="ruby"> } </span><span class="xml"><span class="tag">%&gt;</span></span></span><br></pre></td></tr></tbody></table></figure></div>

<p>其实就是增加了两个</p><div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="PLAIN"><figure class="iseeu highlight /plain"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">#### 2.7 添加动漫人物 ####</span><br><span class="line">其实三步就行了，不用像网上有些教程那么复杂。</span><br><span class="line"></span><br><span class="line">**第一步：**</span><br><span class="line">```bash</span><br><span class="line">npm install --save hexo-helper-live2d</span><br></pre></td></tr></tbody></table></figure></div><p></p>
<p><strong>第二步：</strong></p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="BASH"><figure class="iseeu highlight /bash"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install live2d-widget-model-shizuku</span><br></pre></td></tr></tbody></table></figure></div>

<blockquote>
<p>这里的动漫模型可以改，只需要下载对应模型就行了，你可以<a href="https://github.com/stevenjoezhang/live2d-widget" target="_blank" rel="noopener">官方仓库</a>去看有哪些模型，下载你喜欢的就行。</p>
</blockquote>
<p><strong>第三步：</strong><br>在根目录配置文件中添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line">live2d:</span><br><span class="line">    enable: true</span><br><span class="line">    scriptFrom: local</span><br><span class="line">    pluginRootPath: live2dw/</span><br><span class="line">    pluginJsPath: lib/</span><br><span class="line">    pluginModelPath: assets/</span><br><span class="line">    tagMode: false</span><br><span class="line">    log: false</span><br><span class="line">    model:</span><br><span class="line">        use: live2d-widget-model-shizuku</span><br><span class="line">    display:</span><br><span class="line">        position: right</span><br><span class="line">        width: 150</span><br><span class="line">        height: 300</span><br><span class="line">    mobile:</span><br><span class="line">        show: false</span><br><span class="line">    react:</span><br><span class="line">        opacity: 0.7</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后<code>hexo g</code>再<code>hexo s</code>就能预览出效果了，但是有个注意的地方，这个动漫人物最好不要和不蒜子同时使用，不然不蒜子会显示不出来。</p>
<blockquote>
<p>解决动漫人物和不蒜子不能同时使用的bug：<br>打开<code>themes\matery\layout\_partial</code>中的<code>footer.ejs</code>，将本站总访问量和访客数的代码改为如下：</p>
</blockquote>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.totalTraffic</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-heart-o"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        本站总访问量 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_pv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.totalNumberOfvisitors</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_uv"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        人次,&amp;nbsp;访客数 <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_site_uv"</span> <span class="attr">class</span>=<span class="string">"white-color"</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span> 人.</span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>变化就在下面两句，将源代码对应字段后面的<code>＜/span＞</code>写在前面了。</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="ROUTEROS"><figure class="iseeu highlight /routeros"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;span <span class="attribute">id</span>=<span class="string">"busuanzi_container_site_pv"</span> <span class="attribute">style</span>=<span class="string">'display:none'</span>&gt;&lt;/span&gt;</span><br><span class="line">&lt;span <span class="attribute">id</span>=<span class="string">"busuanzi_container_site_uv"</span> <span class="attribute">style</span>=<span class="string">'display:none'</span>&gt;&lt;/span&gt;</span><br></pre></td></tr></tbody></table></figure></div>

<blockquote>
<p>发现按照上面改了过后，又出现一个新bug：文章头部的阅读次数不显示了，解决办法：<br>打开<code>themes\matery\layout\_partial</code>中的<code>post-detail.ejs</code>，找到对应代码字段：</p>
</blockquote>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.enable</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_page_pv"</span> <span class="attr">class</span>=<span class="string">"info-break-policy"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-eye fa-fw"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">__</span>('<span class="attr">readCount</span>') %&gt;</span>:&amp;nbsp;&amp;nbsp;</span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_page_pv"</span> &gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">div</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>修改为下面的就可以了：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.busuanziStatistics</span> &amp;&amp; <span class="attr">theme.busuanziStatistics.enable</span>) { %&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_container_site_pv"</span> <span class="attr">style</span>=<span class="string">'display:none'</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-eye fa-fw"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">__</span>('<span class="attr">readCount</span>') %&gt;</span>:&amp;nbsp;&amp;nbsp;</span><br><span class="line">        <span class="tag">&lt;<span class="name">span</span> <span class="attr">id</span>=<span class="string">"busuanzi_value_page_pv"</span> &gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-8-添加评论插件"><a href="#2-8-添加评论插件" class="headerlink" title="2.8 添加评论插件"></a>2.8 添加评论插件</h4><p>由于这个主题自带了<code>gittalk</code>、<code>gitment</code>、<code>valine</code>等评论插件，所以我们只需要对应插件参数就行了。</p>
<h4 id="2-9-添加网易云音乐BGM"><a href="#2-9-添加网易云音乐BGM" class="headerlink" title="2.9 添加网易云音乐BGM"></a>2.9 添加网易云音乐BGM</h4><p>写文章的时候，想插入一段<code>BGM</code>怎么办？<br>其实我们可以借助一些在线音乐的外链播放方式，首先打开网易云网页版，找到想听的歌曲，然后点击生成外链：</p>
<p><img src="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/14.png" alt></p>
<p>可能你会遇到问题，比如点击生成外链会提示你由于版权原因，不能生成，那么可以用下面办法目前还有效，不知道后面会不会失效</p>
<ol>
<li>以Chrome为例，其他浏览器类似，打开歌单页面，在“生成外链播放器”上右击，点击审查元素（检查）<code>ctrl+shift+i</code>；</li>
<li>接着找到生成外链播放器这段文字直接双击复制前面的<code>/outchain/2/20707408/</code></li>
</ol>
<p><img src="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/15.png" alt></p>
<ol start="3">
<li>然后在浏览器地址栏修改歌单链接，示例：<a href="https://music.163.com/#//outchain/2/20707408/" target="_blank" rel="noopener">https://music.163.com/#//outchain/2/20707408/</a></li>
<li>然后就转到外链设置页面了。<br>复制如下代码，粘贴到文章对应位置就行了，为了美观，设置一下居中，具体代码如下：</li>
</ol>
<figure class="highlight"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div align="middle"&gt;这里粘贴刚刚复制的代码&lt;/div&gt;</span><br></pre></td></tr></tbody></table></figure>

<h4 id="2-10-博客音乐板块"><a href="#2-10-博客音乐板块" class="headerlink" title="2.10 博客音乐板块"></a>2.10 博客音乐板块</h4><p>如果我们自己写博客写疲劳了，想放松一下听听歌又不想切出博客主页，那么我们可以自己定制一个博客音乐播放界面，把自己喜欢的歌曲都放进来，这里用到是Aplayer插件，但是歌曲来源需要我们自己定义，但是，因为各大音乐平台，由于版权原因，很多歌曲是不支持外链播放的，难道我们就必须每首歌下载然后上传云空间，再获取词曲封面么？这就比较麻烦了。其实不然，研究了半个小时，我发现可以采取下面的办法，很方便：</p>
<ul>
<li>首先我们找到网易云在线平台，任意找到一首歌点进去播放，可以在地址栏拿到音乐<code>ID</code>号</li>
<li>然后通过下面网址：<a href="https://music.163.com/song/media/outer/url?id=XXXXXX.mp3" target="_blank" rel="noopener">https://music.163.com/song/media/outer/url?id=XXXXXX.mp3</a> ， XXXXXX就是歌曲<code>ID</code>号，每一首歌我们只需要换掉这个<code>ID</code>号就行了,就相当于每一首的外链了</li>
<li>最后封面图也可以按<code>F12</code>去找页面元素的链接，填到对应的<code>musics.jason</code>文件中就可以，批量填入，听到好听的歌曲随时更换随时新增，很方便。<br>操作如下图：<br><img src="https://raw.githubusercontent.com/shw2018/cdn/master/blog_files/img/Hexo-Blog-Tutorial/17.png" alt></li>
</ul>
<h4 id="2-11-Valine评论模块修改"><a href="#2-11-Valine评论模块修改" class="headerlink" title="2.11 Valine评论模块修改"></a>2.11 Valine评论模块修改</h4><p><code>matery</code>主题已经集成<code>Valine</code>评论模块，在主题配置文件<code>.yml</code>中配置相应的字段就行了。<code>nable: true</code>，<code>XXX</code>字段是需要自己注册登录<code>leancloud</code>官网，创建应用然后获取<code>appId</code>和<code>appKey</code>，其他参数根据自己的需求修改就是，如下：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">valine:</span><br><span class="line">  enable: true</span><br><span class="line">  appId: XXXXXXXXXXXXXXXXXXXXX</span><br><span class="line">  appKey: XXXXXXXXXXXXXXXXXXXX</span><br><span class="line">  notify: true</span><br><span class="line">  verify: true</span><br><span class="line">  visitor: true</span><br><span class="line">  avatar: 'mm' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide</span><br><span class="line">  pageSize: 10</span><br><span class="line">  placeholder: 'just go go' # Comment Box placeholder</span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-12-添加博客动态标签"><a href="#2-12-添加博客动态标签" class="headerlink" title="2.12 添加博客动态标签"></a>2.12 添加博客动态标签</h4><p>原理就是给博客增加一个事件判断：<br>打开博客主题文件夹，路径：<code>themes/matery/layout/layout.ejs</code>，在对应位置添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> OriginTitile = <span class="built_in">document</span>.title,</span></span><br><span class="line">        st;</span><br><span class="line"><span class="javascript">    <span class="built_in">document</span>.addEventListener(<span class="string">"visibilitychange"</span>, <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span></span><br><span class="line"><span class="javascript">        <span class="built_in">document</span>.hidden ? (<span class="built_in">document</span>.title = <span class="string">"看不见我🙈~看不见我🙈~"</span>, clearTimeout(st)) : (<span class="built_in">document</span>.title =</span></span><br><span class="line"><span class="actionscript">            <span class="string">"(๑•̀ㅂ•́) ✧被发现了～"</span>, st = setTimeout(<span class="function"><span class="keyword">function</span> <span class="params">()</span> </span>{</span></span><br><span class="line"><span class="javascript">                <span class="built_in">document</span>.title = OriginTitile</span></span><br><span class="line">            }, 3e3))</span><br><span class="line">    })</span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>然后<code>hexo clean</code>&amp;&amp;<code>hexo g</code>即可。</p>
<h4 id="2-13-添加鼠标点击烟花爆炸效果"><a href="#2-13-添加鼠标点击烟花爆炸效果" class="headerlink" title="2.13 添加鼠标点击烟花爆炸效果"></a>2.13 添加鼠标点击烟花爆炸效果</h4><p>在<code>/themes/matery/source/js</code>新建文件<code>fireworks.js</code>，并添加如下代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="JS"><figure class="iseeu highlight /js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br></pre></td><td class="code"><pre><span class="line"><span class="meta">"use strict"</span>;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">updateCoords</span>(<span class="params">e</span>)</span>{</span><br><span class="line">  pointerX=(e.clientX||e.touches[<span class="number">0</span>].clientX)</span><br><span class="line">  -canvasEl.getBoundingClientRect().left,</span><br><span class="line">  pointerY=e.clientY||e.touches[<span class="number">0</span>].clientY-canvasEl.getBoundingClientRect().top</span><br><span class="line">  }<span class="function"><span class="keyword">function</span> <span class="title">setParticuleDirection</span>(<span class="params">e</span>)</span>{</span><br><span class="line">    <span class="keyword">var</span> t=anime.random(<span class="number">0</span>,<span class="number">360</span>)*<span class="built_in">Math</span>.PI/<span class="number">180</span>,</span><br><span class="line">    a=anime.random(<span class="number">50</span>,<span class="number">180</span>),</span><br><span class="line">    n=[<span class="number">-1</span>,<span class="number">1</span>][anime.random(<span class="number">0</span>,<span class="number">1</span>)]*a;</span><br><span class="line">    <span class="keyword">return</span>{<span class="attr">x</span>:e.x+n*<span class="built_in">Math</span>.cos(t),<span class="attr">y</span>:e.y+n*<span class="built_in">Math</span>.sin(t)}</span><br><span class="line">    }<span class="function"><span class="keyword">function</span> <span class="title">createParticule</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">      <span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,</span><br><span class="line">      a.y=t,</span><br><span class="line">      a.color=colors[anime.random(<span class="number">0</span>,colors.length<span class="number">-1</span>)],</span><br><span class="line">      a.radius=anime.random(<span class="number">16</span>,<span class="number">32</span>),</span><br><span class="line">      a.endPos=setParticuleDirection(a),</span><br><span class="line">      a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">        ctx.beginPath(),</span><br><span class="line">        ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),</span><br><span class="line">        ctx.fillStyle=a.color,ctx.fill()},a</span><br><span class="line">    }<span class="function"><span class="keyword">function</span> <span class="title">createCircle</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">      <span class="keyword">var</span> a={};</span><br><span class="line">      <span class="keyword">return</span> a.x=e,</span><br><span class="line">      a.y=t,</span><br><span class="line">      a.color=<span class="string">"#F00"</span>,a.radius=<span class="number">0.1</span>,</span><br><span class="line">      a.alpha=<span class="number">0.5</span>,</span><br><span class="line">      a.lineWidth=<span class="number">6</span>,</span><br><span class="line">      a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">        ctx.globalAlpha=a.alpha,</span><br><span class="line">        ctx.beginPath(),</span><br><span class="line">        ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),</span><br><span class="line">        ctx.lineWidth=a.lineWidth,</span><br><span class="line">        ctx.strokeStyle=a.color,ctx.stroke(),</span><br><span class="line">        ctx.globalAlpha=<span class="number">1</span>},a</span><br><span class="line">        }<span class="function"><span class="keyword">function</span> <span class="title">renderParticule</span>(<span class="params">e</span>)</span>{</span><br><span class="line">          <span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t&lt;e.animatables.length;t++){</span><br><span class="line">            e.animatables[t].target.draw()}</span><br><span class="line">        }<span class="function"><span class="keyword">function</span> <span class="title">animateParticules</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">          <span class="keyword">for</span>(<span class="keyword">var</span> a=createCircle(e,t),n=[],i=<span class="number">0</span>;i&lt;numberOfParticules;i++){</span><br><span class="line">            n.push(createParticule(e,t))</span><br><span class="line">          }anime.timeline().add({</span><br><span class="line">            targets:n,</span><br><span class="line">            x:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line">              <span class="keyword">return</span> e.endPos.x</span><br><span class="line">            },<span class="attr">y</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line">              <span class="keyword">return</span> e.endPos.y</span><br><span class="line">            },<span class="attr">radius</span>:<span class="number">0.1</span>,</span><br><span class="line">            duration:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),</span><br><span class="line">            easing:<span class="string">"easeOutExpo"</span>,</span><br><span class="line">            update:renderParticule}).add({<span class="attr">targets</span>:a,</span><br><span class="line">            radius:anime.random(<span class="number">80</span>,<span class="number">160</span>),</span><br><span class="line">            lineWidth:<span class="number">0</span>,</span><br><span class="line">            alpha:{<span class="attr">value</span>:<span class="number">0</span>,<span class="attr">easing</span>:<span class="string">"linear"</span>,<span class="attr">duration</span>:anime.random(<span class="number">600</span>,<span class="number">800</span>)},</span><br><span class="line">            duration:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),</span><br><span class="line">            easing:<span class="string">"easeOutExpo"</span>,</span><br><span class="line">            update:renderParticule,<span class="attr">offset</span>:<span class="number">0</span>})</span><br><span class="line">        }<span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">          <span class="keyword">var</span> a;</span><br><span class="line">          <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">            <span class="keyword">var</span> n=<span class="keyword">this</span>,</span><br><span class="line">            i=<span class="built_in">arguments</span>;</span><br><span class="line">            clearTimeout(a),</span><br><span class="line">            a=setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{e.apply(n,i)},t)}</span><br><span class="line">        }<span class="keyword">var</span> canvasEl=<span class="built_in">document</span>.querySelector(<span class="string">".fireworks"</span>);</span><br><span class="line">        <span class="keyword">if</span>(canvasEl){<span class="keyword">var</span> ctx=canvasEl.getContext(<span class="string">"2d"</span>),</span><br><span class="line">        numberOfParticules=<span class="number">30</span>,</span><br><span class="line">        pointerX=<span class="number">0</span>,pointerY=<span class="number">0</span>,</span><br><span class="line">        tap=<span class="string">"mousedown"</span>,</span><br><span class="line">        colors=[<span class="string">"#FF1461"</span>,<span class="string">"#18FF92"</span>,<span class="string">"#5A87FF"</span>,<span class="string">"#FBF38C"</span>],</span><br><span class="line">        setCanvasSize=debounce(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">          canvasEl.width=<span class="number">2</span>*<span class="built_in">window</span>.innerWidth,</span><br><span class="line">          canvasEl.height=<span class="number">2</span>*<span class="built_in">window</span>.innerHeight,</span><br><span class="line">          canvasEl.style.width=<span class="built_in">window</span>.innerWidth+<span class="string">"px"</span>,</span><br><span class="line">          canvasEl.style.height=<span class="built_in">window</span>.innerHeight+<span class="string">"px"</span>,</span><br><span class="line">          canvasEl.getContext(<span class="string">"2d"</span>).scale(<span class="number">2</span>,<span class="number">2</span>)},<span class="number">500</span>),</span><br><span class="line">          render=anime({<span class="attr">duration</span>:<span class="number">1</span>/<span class="number">0</span>,<span class="attr">update</span>:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">            ctx.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvasEl.width,canvasEl.height)}});</span><br><span class="line">          <span class="built_in">document</span>.addEventListener(tap,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{</span><br><span class="line">            <span class="string">"sidebar"</span>!==e.target.id&amp;&amp;<span class="string">"toggle-sidebar"</span>!==e.target.id&amp;&amp;<span class="string">"A"</span>!==e.target.nodeName&amp;&amp;<span class="string">"IMG"</span>!==e.target.nodeName&amp;&amp;(render.play(),</span><br><span class="line">            updateCoords(e),animateParticules(pointerX,pointerY))},!<span class="number">1</span>),</span><br><span class="line">            setCanvasSize(),<span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,setCanvasSize,!<span class="number">1</span>)}<span class="string">"use strict"</span>;</span><br><span class="line">          <span class="function"><span class="keyword">function</span> <span class="title">updateCoords</span>(<span class="params">e</span>)</span>{</span><br><span class="line">            pointerX=(e.clientX||e.touches[<span class="number">0</span>].clientX)-canvasEl.getBoundingClientRect().left,</span><br><span class="line">            pointerY=e.clientY||e.touches[<span class="number">0</span>].clientY-canvasEl.getBoundingClientRect().top}<span class="function"><span class="keyword">function</span> <span class="title">setParticuleDirection</span>(<span class="params">e</span>)</span>{</span><br><span class="line">            <span class="keyword">var</span> t=anime.random(<span class="number">0</span>,<span class="number">360</span>)*<span class="built_in">Math</span>.PI/<span class="number">180</span>,a=anime.random(<span class="number">50</span>,<span class="number">180</span>),</span><br><span class="line">            n=[<span class="number">-1</span>,<span class="number">1</span>][anime.random(<span class="number">0</span>,<span class="number">1</span>)]*a;</span><br><span class="line">            <span class="keyword">return</span>{<span class="attr">x</span>:e.x+n*<span class="built_in">Math</span>.cos(t),<span class="attr">y</span>:e.y+n*<span class="built_in">Math</span>.sin(t)}}<span class="function"><span class="keyword">function</span> <span class="title">createParticule</span>(<span class="params">e,t</span>)</span>{<span class="keyword">var</span> a={};</span><br><span class="line">            <span class="keyword">return</span> a.x=e,a.y=t,a.color=colors[anime.random(<span class="number">0</span>,colors.length<span class="number">-1</span>)],</span><br><span class="line">            a.radius=anime.random(<span class="number">16</span>,<span class="number">32</span>),a.endPos=setParticuleDirection(a),</span><br><span class="line">            a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{ctx.beginPath(),ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),</span><br><span class="line">            ctx.fillStyle=a.color,ctx.fill()},a}<span class="function"><span class="keyword">function</span> <span class="title">createCircle</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">              <span class="keyword">var</span> a={};<span class="keyword">return</span> a.x=e,a.y=t,a.color=<span class="string">"#F00"</span>,</span><br><span class="line">              a.radius=<span class="number">0.1</span>,a.alpha=<span class="number">0.5</span>,a.lineWidth=<span class="number">6</span>,a.draw=<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">                ctx.globalAlpha=a.alpha,ctx.beginPath(),</span><br><span class="line">                ctx.arc(a.x,a.y,a.radius,<span class="number">0</span>,<span class="number">2</span>*<span class="built_in">Math</span>.PI,!<span class="number">0</span>),</span><br><span class="line">                ctx.lineWidth=a.lineWidth,ctx.strokeStyle=a.color,</span><br><span class="line">                ctx.stroke(),ctx.globalAlpha=<span class="number">1</span>},a}<span class="function"><span class="keyword">function</span> <span class="title">renderParticule</span>(<span class="params">e</span>)</span>{</span><br><span class="line">                  <span class="keyword">for</span>(<span class="keyword">var</span> t=<span class="number">0</span>;t&lt;e.animatables.length;t++){e.animatables[t].target.draw()}</span><br><span class="line">                }<span class="function"><span class="keyword">function</span> <span class="title">animateParticules</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">                  <span class="keyword">for</span>(<span class="keyword">var</span> a=createCircle(e,t),n=[],i=<span class="number">0</span>;</span><br><span class="line">                  i&lt;numberOfParticules;i++){n.push(createParticule(e,t))}anime.timeline().add({<span class="attr">targets</span>:n,<span class="attr">x</span>:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.x},</span><br><span class="line">                  y:<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="keyword">return</span> e.endPos.y},</span><br><span class="line">                  radius:<span class="number">0.1</span>,</span><br><span class="line">                  duration:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),</span><br><span class="line">                  easing:<span class="string">"easeOutExpo"</span>,</span><br><span class="line">                  update:renderParticule}).add({<span class="attr">targets</span>:a,<span class="attr">radius</span>:anime.random(<span class="number">80</span>,<span class="number">160</span>),</span><br><span class="line">                  lineWidth:<span class="number">0</span>,<span class="attr">alpha</span>:{<span class="attr">value</span>:<span class="number">0</span>,<span class="attr">easing</span>:<span class="string">"linear"</span>,<span class="attr">duration</span>:anime.random(<span class="number">600</span>,<span class="number">800</span>)},</span><br><span class="line">                  duration:anime.random(<span class="number">1200</span>,<span class="number">1800</span>),</span><br><span class="line">                  easing:<span class="string">"easeOutExpo"</span>,</span><br><span class="line">                  update:renderParticule,</span><br><span class="line">                  offset:<span class="number">0</span>})}<span class="function"><span class="keyword">function</span> <span class="title">debounce</span>(<span class="params">e,t</span>)</span>{</span><br><span class="line">                    <span class="keyword">var</span> a;</span><br><span class="line">                    <span class="keyword">return</span> <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">                      <span class="keyword">var</span> n=<span class="keyword">this</span>,</span><br><span class="line">                      i=<span class="built_in">arguments</span>;</span><br><span class="line">                      clearTimeout(a),</span><br><span class="line">                      a=setTimeout(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">                        e.apply(n,i)},t)}</span><br><span class="line">                      }<span class="keyword">var</span> canvasEl=<span class="built_in">document</span>.querySelector(<span class="string">".fireworks"</span>);</span><br><span class="line">                      <span class="keyword">if</span>(canvasEl){<span class="keyword">var</span> ctx=canvasEl.getContext(<span class="string">"2d"</span>),</span><br><span class="line">                      numberOfParticules=<span class="number">30</span>,</span><br><span class="line">                      pointerX=<span class="number">0</span>,</span><br><span class="line">                      pointerY=<span class="number">0</span>,</span><br><span class="line">                      tap=<span class="string">"mousedown"</span>,</span><br><span class="line">                      colors=[<span class="string">"#FF1461"</span>,<span class="string">"#18FF92"</span>,<span class="string">"#5A87FF"</span>,<span class="string">"#FBF38C"</span>],</span><br><span class="line">                      setCanvasSize=debounce(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">                        canvasEl.width=<span class="number">2</span>*<span class="built_in">window</span>.innerWidth,</span><br><span class="line">                        canvasEl.height=<span class="number">2</span>*<span class="built_in">window</span>.innerHeight,</span><br><span class="line">                        canvasEl.style.width=<span class="built_in">window</span>.innerWidth+<span class="string">"px"</span>,</span><br><span class="line">                        canvasEl.style.height=<span class="built_in">window</span>.innerHeight+<span class="string">"px"</span>,</span><br><span class="line">                        canvasEl.getContext(<span class="string">"2d"</span>).scale(<span class="number">2</span>,<span class="number">2</span>)},<span class="number">500</span>),</span><br><span class="line">                        render=anime({<span class="attr">duration</span>:<span class="number">1</span>/<span class="number">0</span>,</span><br><span class="line">                        update:<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</span><br><span class="line">                          ctx.clearRect(<span class="number">0</span>,<span class="number">0</span>,canvasEl.width,canvasEl.height)}});</span><br><span class="line">                          <span class="built_in">document</span>.addEventListener(tap,<span class="function"><span class="keyword">function</span>(<span class="params">e</span>)</span>{<span class="string">"sidebar"</span>!==e.target.id&amp;&amp;<span class="string">"toggle-sidebar"</span>!==e.target.id&amp;&amp;<span class="string">"A"</span>!==e.target.nodeName&amp;&amp;<span class="string">"IMG"</span>!==e.target.nodeName&amp;&amp;(render.play(),</span><br><span class="line">                          updateCoords(e),</span><br><span class="line">                          animateParticules(pointerX,pointerY))},!<span class="number">1</span>),</span><br><span class="line">                          setCanvasSize(),</span><br><span class="line">                          <span class="built_in">window</span>.addEventListener(<span class="string">"resize"</span>,setCanvasSize,!<span class="number">1</span>)};</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在<code>/themes/matery/layout/_partial/footer.ejs</code>中添加如下代码：\</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.fireworks.enable</span>) { %&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">canvas</span> <span class="attr">class</span>=<span class="string">"fireworks"</span> <span class="attr">style</span>=<span class="string">"position: fixed; left: 0; top: 0; z-index: 1; pointer-events: none;"</span> &gt;</span><span class="tag">&lt;/<span class="name">canvas</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"//cdn.bootcss.com/animejs/2.2.0/anime.min.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/fireworks.js"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>在主题配置文件<code>.yml</code>中配置:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 鼠标点击烟花爆炸动效</span></span><br><span class="line"><span class="attr">fireworks:</span></span><br><span class="line"><span class="attr">  enable:</span> <span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-14-添加页面樱花飘落动效"><a href="#2-14-添加页面樱花飘落动效" class="headerlink" title="2.14 添加页面樱花飘落动效"></a>2.14 添加页面樱花飘落动效</h4><p>在<code>/themes/matery/source/js</code>新建文件<code>sakura.js</code>，并添加如下代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="JS"><figure class="iseeu highlight /js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> stop, staticx;</span><br><span class="line"><span class="keyword">var</span> img = <span class="keyword">new</span> Image();</span><br><span class="line">img.src = <span class="string">""</span>;</span><br></pre></td></tr></tbody></table></figure></div>

<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="JS"><figure class="iseeu highlight /js"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">Sakura</span>(<span class="params">x, y, s, r, fn</span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.x = x;</span><br><span class="line">    <span class="keyword">this</span>.y = y;</span><br><span class="line">    <span class="keyword">this</span>.s = s;</span><br><span class="line">    <span class="keyword">this</span>.r = r;</span><br><span class="line">    <span class="keyword">this</span>.fn = fn;</span><br><span class="line">}</span><br><span class="line">Sakura.prototype.draw = <span class="function"><span class="keyword">function</span> (<span class="params">cxt</span>) </span>{</span><br><span class="line">    cxt.save();</span><br><span class="line">    <span class="keyword">var</span> xc = <span class="number">40</span> * <span class="keyword">this</span>.s / <span class="number">4</span>;</span><br><span class="line">    cxt.translate(<span class="keyword">this</span>.x, <span class="keyword">this</span>.y);</span><br><span class="line">    cxt.rotate(<span class="keyword">this</span>.r);</span><br><span class="line">    cxt.drawImage(img, <span class="number">0</span>, <span class="number">0</span>, <span class="number">40</span> * <span class="keyword">this</span>.s, <span class="number">40</span> * <span class="keyword">this</span>.s)</span><br><span class="line">    cxt.restore();</span><br><span class="line">}</span><br><span class="line">Sakura.prototype.update = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.x = <span class="keyword">this</span>.fn.x(<span class="keyword">this</span>.x, <span class="keyword">this</span>.y);</span><br><span class="line">    <span class="keyword">this</span>.y = <span class="keyword">this</span>.fn.y(<span class="keyword">this</span>.y, <span class="keyword">this</span>.y);</span><br><span class="line">    <span class="keyword">this</span>.r = <span class="keyword">this</span>.fn.r(<span class="keyword">this</span>.r);</span><br><span class="line">    <span class="keyword">if</span> (<span class="keyword">this</span>.x &gt; <span class="built_in">window</span>.innerWidth || <span class="keyword">this</span>.x &lt; <span class="number">0</span> || <span class="keyword">this</span>.y &gt; <span class="built_in">window</span>.innerHeight || <span class="keyword">this</span>.y &lt; <span class="number">0</span>) {</span><br><span class="line">        <span class="keyword">this</span>.r = getRandom(<span class="string">'fnr'</span>);</span><br><span class="line">        <span class="keyword">if</span> (<span class="built_in">Math</span>.random() &gt; <span class="number">0.4</span>) {</span><br><span class="line">            <span class="keyword">this</span>.x = getRandom(<span class="string">'x'</span>);</span><br><span class="line">            <span class="keyword">this</span>.y = <span class="number">0</span>;</span><br><span class="line">            <span class="keyword">this</span>.s = getRandom(<span class="string">'s'</span>);</span><br><span class="line">            <span class="keyword">this</span>.r = getRandom(<span class="string">'r'</span>);</span><br><span class="line">        } <span class="keyword">else</span> {</span><br><span class="line">            <span class="keyword">this</span>.x = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">            <span class="keyword">this</span>.y = getRandom(<span class="string">'y'</span>);</span><br><span class="line">            <span class="keyword">this</span>.s = getRandom(<span class="string">'s'</span>);</span><br><span class="line">            <span class="keyword">this</span>.r = getRandom(<span class="string">'r'</span>);</span><br><span class="line">        }</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line">SakuraList = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.list = [];</span><br><span class="line">}</span><br><span class="line">SakuraList.prototype.push = <span class="function"><span class="keyword">function</span> (<span class="params">sakura</span>) </span>{</span><br><span class="line">    <span class="keyword">this</span>.list.push(sakura);</span><br><span class="line">}</span><br><span class="line">SakuraList.prototype.update = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = <span class="keyword">this</span>.list.length; i &lt; len; i++) {</span><br><span class="line">        <span class="keyword">this</span>.list[i].update();</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line">SakuraList.prototype.draw = <span class="function"><span class="keyword">function</span> (<span class="params">cxt</span>) </span>{</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>, len = <span class="keyword">this</span>.list.length; i &lt; len; i++) {</span><br><span class="line">        <span class="keyword">this</span>.list[i].draw(cxt);</span><br><span class="line">    }</span><br><span class="line">}</span><br><span class="line">SakuraList.prototype.get = <span class="function"><span class="keyword">function</span> (<span class="params">i</span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.list[i];</span><br><span class="line">}</span><br><span class="line">SakuraList.prototype.size = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">return</span> <span class="keyword">this</span>.list.length;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">getRandom</span>(<span class="params">option</span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> ret, random;</span><br><span class="line">    <span class="keyword">switch</span> (option) {</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'x'</span>:</span><br><span class="line">            ret = <span class="built_in">Math</span>.random() * <span class="built_in">window</span>.innerWidth;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'y'</span>:</span><br><span class="line">            ret = <span class="built_in">Math</span>.random() * <span class="built_in">window</span>.innerHeight;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'s'</span>:</span><br><span class="line">            ret = <span class="built_in">Math</span>.random();</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'r'</span>:</span><br><span class="line">            ret = <span class="built_in">Math</span>.random() * <span class="number">6</span>;</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'fnx'</span>:</span><br><span class="line">            random = <span class="number">-0.5</span> + <span class="built_in">Math</span>.random() * <span class="number">1</span>;</span><br><span class="line">            ret = <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>{</span><br><span class="line">                <span class="keyword">return</span> x + <span class="number">0.5</span> * random - <span class="number">1.7</span>;</span><br><span class="line">            };</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'fny'</span>:</span><br><span class="line">            random = <span class="number">1.5</span> + <span class="built_in">Math</span>.random() * <span class="number">0.7</span></span><br><span class="line">            ret = <span class="function"><span class="keyword">function</span> (<span class="params">x, y</span>) </span>{</span><br><span class="line">                <span class="keyword">return</span> y + random;</span><br><span class="line">            };</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">        <span class="keyword">case</span> <span class="string">'fnr'</span>:</span><br><span class="line">            random = <span class="built_in">Math</span>.random() * <span class="number">0.03</span>;</span><br><span class="line">            ret = <span class="function"><span class="keyword">function</span> (<span class="params">r</span>) </span>{</span><br><span class="line">                <span class="keyword">return</span> r + random;</span><br><span class="line">            };</span><br><span class="line">            <span class="keyword">break</span>;</span><br><span class="line">    }</span><br><span class="line">    <span class="keyword">return</span> ret;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">startSakura</span>(<span class="params"></span>) </span>{</span><br><span class="line">    requestAnimationFrame = <span class="built_in">window</span>.requestAnimationFrame || <span class="built_in">window</span>.mozRequestAnimationFrame || <span class="built_in">window</span>.webkitRequestAnimationFrame || <span class="built_in">window</span>.msRequestAnimationFrame || <span class="built_in">window</span>.oRequestAnimationFrame;</span><br><span class="line">    <span class="keyword">var</span> canvas = <span class="built_in">document</span>.createElement(<span class="string">'canvas'</span>),</span><br><span class="line">        cxt;</span><br><span class="line">    staticx = <span class="literal">true</span>;</span><br><span class="line">    canvas.height = <span class="built_in">window</span>.innerHeight;</span><br><span class="line">    canvas.width = <span class="built_in">window</span>.innerWidth;</span><br><span class="line">    canvas.setAttribute(<span class="string">'style'</span>, <span class="string">'position: fixed;left: 0;top: 0;pointer-events: none;'</span>);</span><br><span class="line">    canvas.setAttribute(<span class="string">'id'</span>, <span class="string">'canvas_sakura'</span>);</span><br><span class="line">    <span class="built_in">document</span>.getElementsByTagName(<span class="string">'body'</span>)[<span class="number">0</span>].appendChild(canvas);</span><br><span class="line">    cxt = canvas.getContext(<span class="string">'2d'</span>);</span><br><span class="line">    <span class="keyword">var</span> sakuraList = <span class="keyword">new</span> SakuraList();</span><br><span class="line">    <span class="keyword">for</span> (<span class="keyword">var</span> i = <span class="number">0</span>; i &lt; <span class="number">50</span>; i++) {</span><br><span class="line">        <span class="keyword">var</span> sakura, randomX, randomY, randomS, randomR, randomFnx, randomFny;</span><br><span class="line">        randomX = getRandom(<span class="string">'x'</span>);</span><br><span class="line">        randomY = getRandom(<span class="string">'y'</span>);</span><br><span class="line">        randomR = getRandom(<span class="string">'r'</span>);</span><br><span class="line">        randomS = getRandom(<span class="string">'s'</span>);</span><br><span class="line">        randomFnx = getRandom(<span class="string">'fnx'</span>);</span><br><span class="line">        randomFny = getRandom(<span class="string">'fny'</span>);</span><br><span class="line">        randomFnR = getRandom(<span class="string">'fnr'</span>);</span><br><span class="line">        sakura = <span class="keyword">new</span> Sakura(randomX, randomY, randomS, randomR, {</span><br><span class="line">            x: randomFnx,</span><br><span class="line">            y: randomFny,</span><br><span class="line">            r: randomFnR</span><br><span class="line">        });</span><br><span class="line">        sakura.draw(cxt);</span><br><span class="line">        sakuraList.push(sakura);</span><br><span class="line">    }</span><br><span class="line">    stop = requestAnimationFrame(<span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">        cxt.clearRect(<span class="number">0</span>, <span class="number">0</span>, canvas.width, canvas.height);</span><br><span class="line">        sakuraList.update();</span><br><span class="line">        sakuraList.draw(cxt);</span><br><span class="line">        stop = requestAnimationFrame(<span class="built_in">arguments</span>.callee);</span><br><span class="line">    })</span><br><span class="line">}</span><br><span class="line"><span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">var</span> canvasSnow = <span class="built_in">document</span>.getElementById(<span class="string">'canvas_snow'</span>);</span><br><span class="line">}</span><br><span class="line">img.onload = <span class="function"><span class="keyword">function</span> (<span class="params"></span>) </span>{</span><br><span class="line">    startSakura();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">stopp</span>(<span class="params"></span>) </span>{</span><br><span class="line">    <span class="keyword">if</span> (staticx) {</span><br><span class="line">        <span class="keyword">var</span> child = <span class="built_in">document</span>.getElementById(<span class="string">"canvas_sakura"</span>);</span><br><span class="line">        child.parentNode.removeChild(child);</span><br><span class="line">        <span class="built_in">window</span>.cancelAnimationFrame(stop);</span><br><span class="line">        staticx = <span class="literal">false</span>;</span><br><span class="line">    } <span class="keyword">else</span> {</span><br><span class="line">        startSakura();</span><br><span class="line">    }</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在<code>/themes/matery/layout/_partial/head.ejs</code>中添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.sakura.enable</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//只在桌面版网页启用特效</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> windowWidth = $(<span class="built_in">window</span>).width();</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">if</span> (windowWidth &gt; <span class="number">768</span>) {</span></span><br><span class="line"><span class="handlebars"><span class="xml">        document.write('<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/sakura.js"</span>&gt;</span></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>');</span><br><span class="line">    }</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>在主题配置文件<code>.yml</code>中配置:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 页面樱花飘落动效</span><br><span class="line">sakura:</span><br><span class="line">  enable: true</span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-15-添加鼠标点击文字特效"><a href="#2-15-添加鼠标点击文字特效" class="headerlink" title="2.15 添加鼠标点击文字特效"></a>2.15 添加鼠标点击文字特效</h4><p>在<code>/themes/matery/source/js</code>新建文件<code>wenzi.js</code>，并添加如下代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">/* 鼠标点击文字特效 */</span><br><span class="line">var a_idx = 0;</span><br><span class="line">jQuery(document).ready(function($) {</span><br><span class="line">    $("body").click(function(e) {</span><br><span class="line">        // var a = new Array("❤富强❤","❤民主❤","❤文明❤","❤和谐❤","❤自由❤","❤平等❤","❤公正❤","❤法治❤","❤爱国❤","❤敬业❤","❤诚信❤","❤友善❤");</span><br><span class="line">        var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善");</span><br><span class="line">        var $i = $("<span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span>").text(a[a_idx]);</span><br><span class="line">        a_idx = (a_idx + 1) % a.length;</span><br><span class="line">        var x = e.pageX,</span><br><span class="line">        y = e.pageY;</span><br><span class="line">        $i.css({</span><br><span class="line">            "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,</span><br><span class="line">            "top": y - 20,</span><br><span class="line">            "left": x,</span><br><span class="line">            "position": "absolute",</span><br><span class="line">            "font-weight": "bold",</span><br><span class="line">            "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"</span><br><span class="line">        });</span><br><span class="line">        $("body").append($i);</span><br><span class="line">        $i.animate({</span><br><span class="line">            "top": y - 180,</span><br><span class="line">            "opacity": 0</span><br><span class="line">        },</span><br><span class="line">        1500,</span><br><span class="line">        function() {</span><br><span class="line">            $i.remove();</span><br><span class="line">        });</span><br><span class="line">    });</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在<code>/themes/matery/layout/_partial/head.ejs</code>中添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="C"><figure class="iseeu highlight /c"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;% <span class="keyword">if</span> (theme.wenzi.enable) { %&gt;</span><br><span class="line">    &lt;script type=<span class="string">"text/javascript"</span>&gt;</span><br><span class="line">    <span class="comment">//只在桌面版网页启用特效</span></span><br><span class="line">    var windowWidth = $(window).width();</span><br><span class="line">    <span class="keyword">if</span> (windowWidth &gt; <span class="number">768</span>) {</span><br><span class="line">        document.write('&lt;script type="text/javascript" src="/js/wenzi.js"&gt;&lt;/script&gt;');</span><br><span class="line">    }</span><br><span class="line">    &lt;/script&gt;</span><br><span class="line">&lt;% } %&gt;</span><br></pre></td></tr></tbody></table></figure></div>

<p>在主题配置文件<code>.yml</code>中配置:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 页面樱花飘落动效</span><br><span class="line">wenzi:</span><br><span class="line">  enable: true</span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-16-添加页面雪花飘落动效"><a href="#2-16-添加页面雪花飘落动效" class="headerlink" title="2.16 添加页面雪花飘落动效"></a>2.16 添加页面雪花飘落动效</h4><p>在<code>/themes/matery/source/js</code>新建文件<code>xuehuapiaoluo.js</code>，并添加如下代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line">/*样式一*/</span><br><span class="line">//背景雪花飘落特效</span><br><span class="line">(function($){</span><br><span class="line">  $.fn.snow = function(options){</span><br><span class="line">  var $flake = $('<span class="tag">&lt;<span class="name">div</span> <span class="attr">id</span>=<span class="string">"snowbox"</span> /&gt;</span>').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&amp;#10052;'),</span><br><span class="line">  documentHeight  = $(document).height(),</span><br><span class="line">  documentWidth = $(document).width(),</span><br><span class="line">  defaults = {</span><br><span class="line">    minSize   : 10,</span><br><span class="line">    maxSize   : 20,</span><br><span class="line">    newOn   : 1000,</span><br><span class="line">    flakeColor  : "#AFDAEF" /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */</span><br><span class="line">  },</span><br><span class="line">  options = $.extend({}, defaults, options);</span><br><span class="line">  var interval= setInterval( function(){</span><br><span class="line">  var startPositionLeft = Math.random() * documentWidth - 100,</span><br><span class="line">  startOpacity = 0.5 + Math.random(),</span><br><span class="line">  sizeFlake = options.minSize + Math.random() * options.maxSize,</span><br><span class="line">  endPositionTop = documentHeight - 200,</span><br><span class="line">  endPositionLeft = startPositionLeft - 500 + Math.random() * 500,</span><br><span class="line">  durationFall = documentHeight * 10 + Math.random() * 5000;</span><br><span class="line">  $flake.clone().appendTo('body').css({</span><br><span class="line">    left: startPositionLeft,</span><br><span class="line">    opacity: startOpacity,</span><br><span class="line">    'font-size': sizeFlake,</span><br><span class="line">    color: options.flakeColor</span><br><span class="line">  }).animate({</span><br><span class="line">    top: endPositionTop,</span><br><span class="line">    left: endPositionLeft,</span><br><span class="line">    opacity: 0.2</span><br><span class="line">  },durationFall,'linear',function(){</span><br><span class="line">    $(this).remove()</span><br><span class="line">  });</span><br><span class="line">  }, options.newOn);</span><br><span class="line">    };</span><br><span class="line">})(jQuery);</span><br><span class="line">$(function(){</span><br><span class="line">    $.fn.snow({</span><br><span class="line">      minSize: 5, /* 定义雪花最小尺寸 */</span><br><span class="line">      maxSize: 50,/* 定义雪花最大尺寸 */</span><br><span class="line">      newOn: 500  /* 定义密集程度，数字越小越密集 */</span><br><span class="line">    });</span><br><span class="line">});</span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在<code>/themes/matery/layout/_partial/head.ejs</code>中添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.xuehuapiaoluo.enable</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">    <span class="comment">//只在桌面版网页启用特效</span></span></span><br><span class="line"><span class="javascript">    <span class="keyword">var</span> windowWidth = $(<span class="built_in">window</span>).width();</span></span><br><span class="line"><span class="actionscript">    <span class="keyword">if</span> (windowWidth &gt; <span class="number">768</span>) {</span></span><br><span class="line"><span class="handlebars"><span class="xml">        document.write('<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"/js/xuehuapiaoluo.js"</span>&gt;</span></span></span><span class="tag">&lt;/<span class="name">script</span>&gt;</span>');</span><br><span class="line">    }</span><br><span class="line">    <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>在主题配置文件<code>.yml</code>中配置:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"># 页面樱花飘落动效</span><br><span class="line">xuehuapiaoluo:</span><br><span class="line">  enable: true</span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-17-添加博客天气插件"><a href="#2-17-添加博客天气插件" class="headerlink" title="2.17 添加博客天气插件"></a>2.17 添加博客天气插件</h4><p>在搜寻插件的过程中无意间用<code>google</code>搜到的一个网站，使用非常简单，在这里附上插件添加的方法<br>中国天气网：<a href="https://cj.weather.com.cn/plugin/pc" target="_blank" rel="noopener">https://cj.weather.com.cn/plugin/pc</a><br>选择自定义插件—&gt;自定义样式——&gt;生成代码，然后会生成这样一段代码</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- Weather Widget --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span><span class="actionscript"> WIDGET = {FID: <span class="string">'your FID'</span>}</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://apip.weatherdt.com/float/static/js/r.js?v=1111"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>在<code>/themes/matery/source/layout/_widget</code>新建文件<code>weather.ejs</code>，把上面生成的代码添加进入,可以设置只有桌面端显示,如下修改:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 天气接口 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">  WIDGET = {FID: <span class="string">'1tFpFZ5Mtj'</span>}</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="comment">&lt;!-- &lt;script type="text/javascript" src="https://apip.weatherdt.com/float/static/js/r.js?v=1111"&gt;&lt;/script&gt; --&gt;</span></span><br><span class="line"></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">  <span class="comment">//只在桌面版网页启用特效</span></span></span><br><span class="line"><span class="javascript">  <span class="keyword">var</span> windowWidth = $(<span class="built_in">window</span>).width();</span></span><br><span class="line"><span class="actionscript">  <span class="keyword">if</span> (windowWidth &gt; <span class="number">768</span>) {</span></span><br><span class="line"><span class="handlebars"><span class="xml">      document.write('<span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://apip.weatherdt.com/float/static/js/r.js?v=1111"</span>&gt;</span><span class="handlebars"><span class="xml"><span class="tag">&lt;<span class="name">\</span>/<span class="attr">script</span>&gt;</span>');</span></span></span></span></span><br><span class="line">  }</span><br><span class="line">  <span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>然后在<code>/themes/matery/layout/_partial/layout.ejs</code>中添加如下代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.weather.enable</span>) { %&gt;</span></span><br><span class="line">  <span class="tag">&lt;<span class="name">%-</span> <span class="attr">partial</span>('<span class="attr">_widget</span>/<span class="attr">weather</span>') %&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>在主题配置文件<code>.yml</code>中配置:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="YAML"><figure class="iseeu highlight /yaml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment"># 天气接口插件</span></span><br><span class="line"><span class="attr">weather:</span></span><br><span class="line"><span class="attr">  enable:</span> <span class="literal">true</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>展示效果可以参考我的<a href="https://gkm0120.gitee.io/" target="_blank" rel="noopener">主页</a></p>
<p>当然,如果你不想搞这么复杂,可以直接将下面代码插入<code>/themes/matery/layout/_partial/layout.ejs</code>中即可使用:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span>&gt;</span></span><br><span class="line"><span class="actionscript">    WIDGET = {FID: <span class="string">'1tFpFZ5Mtj'</span>}</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">script</span> <span class="attr">type</span>=<span class="string">"text/javascript"</span> <span class="attr">src</span>=<span class="string">"https://apip.weatherdt.com/float/static/js/r.js?v=1111"</span>&gt;</span><span class="tag">&lt;/<span class="name">script</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<h4 id="2-18-修复-Valine-头像不显示问题"><a href="#2-18-修复-Valine-头像不显示问题" class="headerlink" title="2.18 修复 Valine 头像不显示问题"></a>2.18 修复 Valine 头像不显示问题</h4><p>关于头像显示问题，先去注册<a href="https://cn.gravatar.com/" target="_blank" rel="noopener">Gravatar</a>，之前看文档说是七天的同步时间，结果一直也没有显示头像，检查查看头像链接，发现把<code>&amp;v=1.3.x</code>去掉就可以了，于是下载 js 文件<code>valine</code>，下载后然后编辑，搜索关键字<code>&amp;v=</code>，找到<code>g.params=”?d=”+i.indexOf(a&gt;-1?a:”mp”)+”&amp;v=”+o+d</code>，将<code>"&amp;v="+o+d</code>删除即可，然后在<code>Gravatar</code>拿到头像的<code>url</code>填上去就行了</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">valine:</span><br><span class="line">  enable: true</span><br><span class="line">  appId:</span><br><span class="line">  appKey:</span><br><span class="line">  notify: true</span><br><span class="line">  verify: true</span><br><span class="line">  visitor: true</span><br><span class="line">  # avatar: 'mp' # Gravatar style : mm/identicon/monsterid/wavatar/retro/hide</span><br><span class="line">  avatar: https://s.gravatar.com/avatar/0007991f99268c04f1aa4cdd9bea93b4?s=80</span><br><span class="line">  pageSize: 10</span><br><span class="line">  placeholder: '没有Github账号的在这里留言评论～' # Comment Box placeholder</span><br></pre></td></tr></tbody></table></figure></div>

<p>原因就是链接后跟了个<code>&amp;v=1.3.x</code>，解决就是将这段删掉就可以了，具体到<code>Valine.mini.js</code>文件就是删掉<code>&amp;v="+o+d</code>即可</p>
<h4 id="2-19-增加二级菜单"><a href="#2-19-增加二级菜单" class="headerlink" title="2.19 增加二级菜单"></a>2.19 增加二级菜单</h4><p>都知道，我们标题栏宽度有限，我们项目一多了，就放不下了，这时候你肯定就需要一个二级菜单来拆分一下项目，既可以减少标题栏项目数，使之更加清爽，又可以间项目分类，逻辑清晰。</p>
<p>好了，如果你用的<code>matery</code>主题，那么废话不多说，直接上教程，其实需要修改的就四个地方：<code>matery.css/matery.js/navgation.ejs/mobile-nav.ejs</code></p>
<p>第一步，在<code>/themes/matery/layout/_partial</code>中找到<code>mobile-nav.ejs</code>，找到下面这段代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"menu-list mobile-menu-list"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">Object.keys</span>(<span class="attr">theme.menu</span>)<span class="attr">.forEach</span>(<span class="attr">function</span>(<span class="attr">key</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.menu[key].url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> } <span class="attr">else</span> { %&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw fa-link"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> }); %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.githubLink</span> &amp;&amp; <span class="attr">theme.githubLink.enable</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divider"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.githubLink.url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-github-square fa-fw"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.githubLink.title</span> %&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>替换成下面的：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 支持二级菜单特性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"menu-list mobile-menu-list"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">Object.keys</span>(<span class="attr">theme.menu</span>)<span class="attr">.forEach</span>(<span class="attr">function</span>(<span class="attr">key</span>) { %&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"m-nav-item"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span>(!<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.children</span>) { %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.menu[key].url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">%</span> } <span class="attr">else</span> { %&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw fa-link"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                        <span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> } <span class="attr">else</span> { %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"javascript:;"</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">%</span> } <span class="attr">else</span> { %&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-fw fa-link"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span></span><br><span class="line">                            <span class="tag">&lt;<span class="name">span</span> <span class="attr">class</span>=<span class="string">"m-icon"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-right"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">ul</span>&gt;</span></span><br><span class="line">                  <span class="tag">&lt;<span class="name">%</span> <span class="attr">for</span>(<span class="attr">let</span> <span class="attr">childrenLink</span> <span class="attr">of</span> <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.children</span>){ %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- url_for(childrenLink.url)%&gt;"</span> &gt;</span></span><br><span class="line">                           <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">childrenLink.icon</span> &amp;&amp; <span class="attr">childrenLink.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa &lt;%- childrenLink.icon %&gt;"</span> <span class="attr">style</span>=<span class="string">"left: 25px; position: absolute;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                       <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                       <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">childrenLink.name</span> %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                      <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">                  <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">%</span> }); %&gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.githubLink</span> &amp;&amp; <span class="attr">theme.githubLink.enable</span>) { %&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span><span class="tag">&lt;<span class="name">div</span> <span class="attr">class</span>=<span class="string">"divider"</span>&gt;</span><span class="tag">&lt;/<span class="name">div</span>&gt;</span><span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.githubLink.url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span> <span class="attr">target</span>=<span class="string">"_blank"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-github-square fa-fw"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">theme.githubLink.title</span> %&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>第二步，在<code>/themes/matery/layout/_partial</code>中找到<code>navagtion.ejs</code>，找到下面这段代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">data-target</span>=<span class="string">"mobile-nav"</span> <span class="attr">class</span>=<span class="string">"sidenav-trigger button-collapse"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-navicon"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"right"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">Object.keys</span>(<span class="attr">theme.menu</span>)<span class="attr">.forEach</span>(<span class="attr">function</span>(<span class="attr">key</span>) { %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"hide-on-med-and-down"</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.menu[key].url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> }); %&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#searchModal"</span> <span class="attr">class</span>=<span class="string">"modal-trigger waves-effect waves-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">id</span>=<span class="string">"searchIcon"</span> <span class="attr">class</span>=<span class="string">"fa fa-search"</span> <span class="attr">title</span>=<span class="string">"&lt;%= __('search') %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>替换成下面的：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">&lt;!-- 支持二级菜单特性 --&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#"</span> <span class="attr">data-target</span>=<span class="string">"mobile-nav"</span> <span class="attr">class</span>=<span class="string">"sidenav-trigger button-collapse"</span>&gt;</span><span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-navicon"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span><span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"right nav-menu"</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> <span class="attr">Object.keys</span>(<span class="attr">theme.menu</span>)<span class="attr">.forEach</span>(<span class="attr">function</span>(<span class="attr">key</span>) { %&gt;</span></span><br><span class="line">      <span class="tag">&lt;<span class="name">li</span> <span class="attr">class</span>=<span class="string">"hide-on-med-and-down nav-item"</span> &gt;</span></span><br><span class="line"></span><br><span class="line">        <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span>(!<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.children</span>) { %&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.menu[key].url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">%</span> } <span class="attr">else</span> { %&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- theme.menu[key].url %&gt;"</span> <span class="attr">class</span>=<span class="string">"waves-effect waves-light"</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon</span> &amp;&amp; <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                  <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa &lt;%- theme.menu[key].icon %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> (<span class="attr">config.language</span> === <span class="string">'zh-CN'</span> &amp;&amp; <span class="attr">menuMap.has</span>(<span class="attr">key</span>)) ? <span class="attr">menuMap.get</span>(<span class="attr">key</span>) <span class="attr">:</span> <span class="attr">key</span> %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa fa-chevron-down"</span> <span class="attr">aria-hidden</span>=<span class="string">"true"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line"></span><br><span class="line">            <span class="tag">&lt;<span class="name">ul</span> <span class="attr">class</span>=<span class="string">"sub-nav menus_item_child "</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> <span class="attr">for</span>(<span class="attr">let</span> <span class="attr">childrenLink</span> <span class="attr">of</span> <span class="attr">theme.menu</span>[<span class="attr">key</span>]<span class="attr">.children</span>){ %&gt;</span></span><br><span class="line">                <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">                  <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"&lt;%- url_for(childrenLink.url)%&gt;"</span> &gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%</span> <span class="attr">if</span> (<span class="attr">childrenLink.icon</span> &amp;&amp; <span class="attr">childrenLink.icon.length</span> &gt;</span> 0) { %&gt;</span><br><span class="line">                      <span class="tag">&lt;<span class="name">i</span> <span class="attr">class</span>=<span class="string">"fa &lt;%- childrenLink.icon %&gt;"</span> <span class="attr">style</span>=<span class="string">"margin-top: -20px;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">                    <span class="tag">&lt;<span class="name">span</span>&gt;</span><span class="tag">&lt;<span class="name">%-</span> <span class="attr">childrenLink.name</span> %&gt;</span><span class="tag">&lt;/<span class="name">span</span>&gt;</span></span><br><span class="line">                  <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">                <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">              <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">            <span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br><span class="line">          <span class="tag">&lt;<span class="name">%</span> } %&gt;</span></span><br><span class="line">      <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;<span class="name">%</span> }); %&gt;</span></span><br><span class="line"></span><br><span class="line">    <span class="tag">&lt;<span class="name">li</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;<span class="name">a</span> <span class="attr">href</span>=<span class="string">"#searchModal"</span> <span class="attr">class</span>=<span class="string">"modal-trigger waves-effect waves-light"</span>&gt;</span></span><br><span class="line">            <span class="tag">&lt;<span class="name">i</span> <span class="attr">id</span>=<span class="string">"searchIcon"</span> <span class="attr">class</span>=<span class="string">"fa fa-search"</span> <span class="attr">title</span>=<span class="string">"&lt;%= __('search') %&gt;"</span>&gt;</span><span class="tag">&lt;/<span class="name">i</span>&gt;</span></span><br><span class="line">        <span class="tag">&lt;/<span class="name">a</span>&gt;</span></span><br><span class="line">    <span class="tag">&lt;/<span class="name">li</span>&gt;</span></span><br><span class="line"><span class="tag">&lt;/<span class="name">ul</span>&gt;</span></span><br></pre></td></tr></tbody></table></figure></div>

<p>第三步，在<code>/themes/matery/source/css</code>中找到<code>matery.css</code>，在最后添加下面这段代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br></pre></td><td class="code"><pre><span class="line">/*二级菜单样式定义*/</span><br><span class="line">.nav-menu {}</span><br><span class="line"></span><br><span class="line">.nav-menu li .sub-nav {</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: 77px;</span><br><span class="line">    list-style: none;</span><br><span class="line">    margin-left: -20px;</span><br><span class="line">    display: none;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.nav-menu li .sub-nav li {</span><br><span class="line">    text-align: center;</span><br><span class="line">    clear: left;</span><br><span class="line">    width: 140px;</span><br><span class="line">    height: 35px;</span><br><span class="line">    line-height: 35px;</span><br><span class="line">    position: relative;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.nav-menu li .sub-nav li a {</span><br><span class="line">    height: 34px;</span><br><span class="line">    line-height: 34px;</span><br><span class="line">    width: 138px;</span><br><span class="line">    padding: 0px;</span><br><span class="line">    display: inline-block;</span><br><span class="line">    border-radius: 5px;</span><br><span class="line">    color: #000;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.nav-show i[aria-hidden=true] {</span><br><span class="line">    -webkit-transform: rotate(180deg) !important;</span><br><span class="line">    -moz-transform: rotate(180deg) !important;</span><br><span class="line">    -o-transform: rotate(180deg) !important;</span><br><span class="line">    -ms-transform: rotate(180deg) !important;</span><br><span class="line">    transform: rotate(180deg) !important;</span><br><span class="line">    -webkit-transition: all .3s;</span><br><span class="line">    -moz-transition: all .3s;</span><br><span class="line">    -o-transition: all .3s;</span><br><span class="line">    -ms-transition: all .3s;</span><br><span class="line">    transition: all .3s;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.menus_item_child {</span><br><span class="line">    background-color: rgba(255, 255, 255, .8);</span><br><span class="line">    width: fit-content;</span><br><span class="line">    border-radius: 10px;</span><br><span class="line">    -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);</span><br><span class="line">    box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);</span><br><span class="line">    display: none;</span><br><span class="line">    opacity: 0.98;</span><br><span class="line">    -ms-filter: none;</span><br><span class="line">    filter: none;</span><br><span class="line">    -webkit-animation: sub_menus .3s .1s ease both;</span><br><span class="line">    -moz-animation: sub_menus .3s .1s ease both;</span><br><span class="line">    -o-animation: sub_menus .3s .1s ease both;</span><br><span class="line">    -ms-animation: sub_menus .3s .1s ease both;</span><br><span class="line">    animation: sub_menus .3s .1s ease both;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.menus_item_child:before {</span><br><span class="line">    content: "";</span><br><span class="line">    position: absolute;</span><br><span class="line">    top: -20px;</span><br><span class="line">    left: 50%;</span><br><span class="line">    margin-left: -10px;</span><br><span class="line">    border-width: 10px;</span><br><span class="line">    border-style: solid;</span><br><span class="line">    border-color: transparent transparent rgba(255, 255, 255, .8)</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-item {</span><br><span class="line">    /* position: relative; */</span><br><span class="line">    left: 45px</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-item ul {</span><br><span class="line">    display: none;</span><br><span class="line">    background: rgba(255, 255, 255, .1);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-item ul li {</span><br><span class="line">    width: 245px;</span><br><span class="line">    height: 50px;</span><br><span class="line">    line-height: 50px;</span><br><span class="line">    text-align: center;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-show .m-icon {</span><br><span class="line">    -webkit-transform: rotate(90deg) !important;</span><br><span class="line">    -moz-transform: rotate(90deg) !important;</span><br><span class="line">    -o-transform: rotate(90deg) !important;</span><br><span class="line">    -ms-transform: rotate(90deg) !important;</span><br><span class="line">    transform: rotate(90deg) !important;</span><br><span class="line">    -webkit-transition: all .3s;</span><br><span class="line">    -moz-transition: all .3s;</span><br><span class="line">    -o-transition: all .3s;</span><br><span class="line">    -ms-transition: all .3s;</span><br><span class="line">    transition: all .3s;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-show .m-nav-item&gt;a:hover {</span><br><span class="line">    color: #FFF;</span><br><span class="line">    background: rgba(255, 255, 255, .8);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-show&gt;a:before,</span><br><span class="line">.m-nav-item&gt;a:hover:before {</span><br><span class="line">    opacity: 1;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.m-nav-item .m-icon {</span><br><span class="line">    position: absolute;</span><br><span class="line">    right: 65px;</span><br><span class="line">    height: 50px;</span><br><span class="line">    padding: 0px;</span><br><span class="line">    margin: 0px;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.nav-item li:hover a {</span><br><span class="line">    color: #FFF;</span><br><span class="line">    background: rgba(0, 0, 0, .1);</span><br><span class="line">}</span><br></pre></td></tr></tbody></table></figure></div>

<p>第四步，在<code>/themes/matery/source/js</code>中找到<code>matery.js</code>，在最后一个 });前添加下面这段代码：</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="C"><figure class="iseeu highlight /c"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 增加二级菜单功能</span></span><br><span class="line">    $(<span class="string">".nav-menu&gt;li"</span>).hover(function(){</span><br><span class="line">        $(this).children('ul').stop(true,true).show();</span><br><span class="line">        $(this).addClass('nav-show').siblings('li').removeClass('nav-show');</span><br><span class="line"></span><br><span class="line">    },function(){</span><br><span class="line">        $(this).children('ul').stop(true,true).hide();</span><br><span class="line">        $('.nav-item.nav-show').removeClass('nav-show');</span><br><span class="line">    })</span><br><span class="line"></span><br><span class="line">    $('.m-nav-item&gt;a').on('click',function(){</span><br><span class="line">            if ($(this).next('ul').css('display') == "none") {</span><br><span class="line">                $('.m-nav-item').children('ul').slideUp(300);</span><br><span class="line">                $(this).next('ul').slideDown(300);</span><br><span class="line">                $(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show');</span><br><span class="line">            }<span class="keyword">else</span>{</span><br><span class="line">                $(this).next('ul').slideUp(300);</span><br><span class="line">                $('.m-nav-item.m-nav-show').removeClass('m-nav-show');</span><br><span class="line">            }</span><br><span class="line">    });</span><br></pre></td></tr></tbody></table></figure></div>

<p>第五步，在主题配置文件<code>.yml</code>修改标题栏内容，按下面格式更改:</p>
<div class="highlight-wrap" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" contenteditable="true" data-rel="XML"><figure class="iseeu highlight /xml"><table><tbody><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">标题一级:</span><br><span class="line">  url: /XXX</span><br><span class="line">  icon: fa-XXXX</span><br><span class="line">  children:</span><br><span class="line">    -</span><br><span class="line">      name: 标题二级1</span><br><span class="line">      url: /XXX/XXX</span><br><span class="line">      icon: fa-XXXX</span><br><span class="line">    -</span><br><span class="line">      name: 标题二级2</span><br><span class="line">      url: /XXX/XXX</span><br><span class="line">      icon: fa-XXXX</span><br></pre></td></tr></tbody></table></figure></div>

<p>第六步，<code>source</code>文件夹新疆对应的标题目录，并放<code>index.md</code>模板就行了。</p>
<h3 id="3-参考链接"><a href="#3-参考链接" class="headerlink" title="3.参考链接"></a>3.参考链接</h3><ol>
<li><a href="https://sunhwee.coding.me/posts/6e8839eb.html#toc-heading-38" target="_blank" rel="noopener">洪卫の博客</a></li>
</ol>
<script>
        document.querySelectorAll('.github-emoji')
          .forEach(el => {
            if (!el.dataset.src) { return; }
            const img = document.createElement('img');
            img.style = 'display:none !important;';
            img.src = el.dataset.src;
            img.addEventListener('error', () => {
              img.remove();
              el.style.color = 'inherit';
              el.style.backgroundImage = 'none';
              el.style.background = 'none';
            });
            img.addEventListener('load', () => {
              img.remove();
            });
            document.body.appendChild(img);
          });
      </script>

        

      
    </div>

      <!-- 相关文章推荐 -->
     

    
    
    

    <div>
          
            

          
    </div>

    

    <div>
      
        <div>
    
        <div class="read-over">-------------------本文结束 <i class="fa fa-paw"></i> 感谢您的阅读-------------------</div>
    
</div>

      
    </div>

    
      <div>
        <div class="share_reward">
  <div></div>
  <button id="rewardButton" disable="enable" onclick="var qr = document.getElementById('QR'); if (qr.style.display === 'none') {qr.style.display='block';} else {qr.style.display='none'}">
    <span>Donate</span>
  </button>
  <div id="QR" style="display: none;">

    
      <div id="wechat" style="display: inline-block">
        <img id="wechat_qr" src="/images/wechatpay.jpg" alt="戈孔明 WeChat Pay">
        <p>WeChat Pay</p>
      </div>
    

    
      <div id="alipay" style="display: inline-block">
        <img id="alipay_qr" src="/images/alipay.jpg" alt="戈孔明 Alipay">
        <p>Alipay</p>
      </div>
    

    

  </div>
</div>

      </div>
    

    

    <footer class="post-footer">
      
        <div class="post-tags">
          
            <a href="/tags/Hexo/" rel="tag"> <i class="fa fa-tag"></i> Hexo</a>
          
        </div>
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/p/13651.html" rel="next" title="Hill密码加密解密">
                <i class="fa fa-chevron-left"></i> Hill密码加密解密
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/p/44546.html" rel="prev" title="Cohen-Sutherland编码裁剪">
                Cohen-Sutherland编码裁剪 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
         <div data-weibo-title="分享到微博" data-qq-title="分享到QQ" data-douban-title="分享到豆瓣" class="social-share" data-disabled="qzone,google+,linkedin" data-description="Share.js - 一键分享到微博，QQ空间，腾讯微博，人人，豆瓣...">
   分享到：
</div>


      
    </div>
  </div>


          </div>
          


          

  
    <div id="gitalk-container"></div>

  





        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
      <div id="sidebar-dimmer"></div>
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            Table of Contents
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            Overview
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
            
              <a href="/">
              <img class="site-author-image" itemprop="image" src="/images/avatar.png" alt="戈孔明">
              </a>
            
              <p class="site-author-name" itemprop="name">戈孔明</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">26</span>
                  <span class="site-state-item-name">posts</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">9</span>
                  <span class="site-state-item-name">categories</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-tags">
                <a href="/tags/index.html">
                  <span class="site-state-item-count">26</span>
                  <span class="site-state-item-name">tags</span>
                </a>
              </div>
            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
              <!-- 为Hexo Next主题添加哈林摇特效  -->
              <a title="收藏到书签，偶尔High一下^_^" rel="alternate" class="mw-harlem_shake_slow wobble shake" href="javascript:void(0)" onclick="javascript:(    /*     * Copyright (C) 2015 Rocko (rocko.xyz) <rocko.zxp@gmail.com>     *     * Licensed under the Apache License, Version 2.0 (the 'License');     * you may not use this file except in compliance with the License.     * You may obtain a copy of the License at     *     *      http://www.apache.org/licenses/LICENSE-2.0     *     * Unless required by applicable law or agreed to in writing, software     * distributed under the License is distributed on an 'AS IS' BASIS,     * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.     * See the License for the specific language governing permissions and     * limitations under the License.     */    function go() {        function c() {        var e = document.createElement('link');        e.setAttribute('type', 'text/css');        e.setAttribute('rel', 'stylesheet');        e.setAttribute('href', f);        e.setAttribute('class', l);        document.body.appendChild(e)    }     function h() {        var e = document.getElementsByClassName(l);        for (var t = 0; t < e.length; t++) {            document.body.removeChild(e[t])        }    }     function p() {        var e = document.createElement('div');        e.setAttribute('class', a);        document.body.appendChild(e);        setTimeout(function() {            document.body.removeChild(e)        }, 100)    }     function d(e) {        return {            height : e.offsetHeight,            width : e.offsetWidth        }    }     function v(i) {        var s = d(i);        return s.height > e &amp;&amp; s.height < n &amp;&amp; s.width > t &amp;&amp; s.width < r    }     function m(e) {        var t = e;        var n = 0;        while (!!t) {            n += t.offsetTop;            t = t.offsetParent        }        return n    }     function g() {        var e = document.documentElement;        if (!!window.innerWidth) {            return window.innerHeight        } else if (e &amp;&amp; !isNaN(e.clientHeight)) {            return e.clientHeight        }        return 0    }     function y() {        if (window.pageYOffset) {            return window.pageYOffset        }        return Math.max(document.documentElement.scrollTop, document.body.scrollTop)    }     function E(e) {        var t = m(e);        return t >= w &amp;&amp; t <= b + w    }     var songs = [                'http://s3.amazonaws.com/moovweb-marketing/playground/harlem-shake.mp3', 'http://www.ytmp3.cn/down/57563.mp3'  ];    function S() {        var e = document.getElementById('audio_element_id');        if(e != null){            var index = parseInt(e.getAttribute('curSongIndex'));            if(index > songs.length - 2) {                index = 0;            } else {                index++;            }            e.setAttribute('curSongIndex', index);            N();        }        e.src = i;        e.play()    }     function x(e) {        e.className += ' ' + s + ' ' + o    }     function T(e) {        e.className += ' ' + s + ' ' + u[Math.floor(Math.random() * u.length)]    }     function N() {        var e = document.getElementsByClassName(s);        var t = new RegExp('\\b' + s + '\\b');        for (var n = 0; n < e.length; ) {            e[n].className = e[n].className.replace(t, '')        }    }    function initAudioEle() {        var e = document.getElementById('audio_element_id');        if(e === null){            e = document.createElement('audio');            e.setAttribute('class', l);            e.setAttribute('curSongIndex', 0);            e.id = 'audio_element_id';            e.loop = false;            e.bgcolor = 0;            e.addEventListener('canplay', function() {            setTimeout(function() {                x(k)            }, 500);            setTimeout(function() {                N();                p();                for (var e = 0; e < O.length; e++) {                    T(O[e])                }            }, 15500)        }, true);        e.addEventListener('ended', function() {            N();            h();            go();        }, true);        e.innerHTML = ' <p>If you are reading this, it is because your browser does not support the audio element. We recommend that you get a new browser.</p> <p>';        document.body.appendChild(e);        }    }        initAudioEle();    var e = 30;    var t = 30;    var n = 350;    var r = 350;    var curSongIndex = parseInt(document.getElementById('audio_element_id').getAttribute('curSongIndex'));    var i = songs[curSongIndex];        var s = 'mw-harlem_shake_me';    var o = 'im_first';    var u = ['im_drunk', 'im_baked', 'im_trippin', 'im_blown'];    var a = 'mw-strobe_light';    var f = 'https://rocko.xyz/css/harlem-shake-style.css';        var l = 'mw_added_css';    var b = g();    var w = y();    var C = document.getElementsByTagName('*');    var k = null;    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            if (E(A)) {                k = A;                break            }        }    }    if (A === null) {        console.warn('Could not find a node of the right size. Please try a different page.');        return    }    c();    S();    var O = [];    for (var L = 0; L < C.length; L++) {        var A = C[L];        if (v(A)) {            O.push(A)        }    }    })()">
        <i class="fa fa-music"></i> High~
</a>

            </div>
          

          
            <div class="links-of-author motion-element">
                
                  <span class="links-of-author-item">
                    <a rel="external nofollow" href="https://github.com/gkm0120" target="_blank" title="GitHub">
                      
                        <i class="fa fa-fw fa-github"></i>GitHub</a>
                  </span>
                
                  <span class="links-of-author-item">
                    <a rel="external nofollow" href="mailto:gkm0120@163.com" target="_blank" title="E-Mail">
                      
                        <i class="fa fa-fw fa-envelope"></i>E-Mail</a>
                  </span>
                
            </div>
          

            <!--
            <div id="music163player">
                <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1336790004&auto=1&height=66"></iframe>
            </div>
            -->

          
          
            <div class="cc-license motion-element" itemprop="license">
              <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/" rel="external nofollow" class="cc-opacity" target="_blank">
                <img src="/images/cc-by-nc-sa.svg" alt="Creative Commons">
              </a>
            </div>
          

          
          
            <div class="links-of-blogroll motion-element links-of-blogroll-inline">
              <div class="links-of-blogroll-title">
                <i class="fa  fa-fw fa-link"></i>
                Links&nbsp;
                <i class="fa  fa-fw fa-link"></i>
              </div>
              <ul class="links-of-blogroll-list">
                
                  <li class="links-of-blogroll-item">
                    <a href="https://gkm0120.cn/" title="孔明の博客" rel="external nofollow" target="_blank">孔明の博客</a>
                  </li>
                
                  <li class="links-of-blogroll-item">
                    <a href="https://hpcsiplab.hunnu.edu.cn/" title="LCSM" rel="external nofollow" target="_blank">LCSM</a>
                  </li>
                
              </ul>
            </div>
          

          <!--近期文章版块 began-->
          
          <!--近期文章版块 end-->

          
          
              <!-- 网站运行时间 -->
              <div id="days"></div>

<script language="javascript">
function show_date_time(){
window.setTimeout("show_date_time()", 1000);
BirthDay=new Date("03/15/2020 00:00:00");
today=new Date();
timeold=(today.getTime()-BirthDay.getTime());
sectimeold=timeold/1000
secondsold=Math.floor(sectimeold);
msPerDay=24*60*60*1000
e_daysold=timeold/msPerDay
daysold=Math.floor(e_daysold);
e_hrsold=(e_daysold-daysold)*24;
hrsold=setzero(Math.floor(e_hrsold));
e_minsold=(e_hrsold-hrsold)*60;
minsold=setzero(Math.floor((e_hrsold-hrsold)*60));
seconds=setzero(Math.floor((e_minsold-minsold)*60));
document.getElementById('days').innerHTML="已运行"+daysold+"天"+hrsold+"时"+minsold+"分"+seconds+"秒";
}
function setzero(i){
if (i<10)
{i="0" + i};
return i;
}
show_date_time();
</script>

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#定制"><span class="nav-text">定制</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-Hexo相关目录文件"><span class="nav-text">1. Hexo相关目录文件</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-1-博客目录构成介绍"><span class="nav-text">1.1 博客目录构成介绍</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#1-2-hexo基本配置"><span class="nav-text">1.2 hexo基本配置</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-1-网站"><span class="nav-text">1.2.1 网站</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-2-网址"><span class="nav-text">1.2.2 网址</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-3-Front-matter"><span class="nav-text">1.2.3 Front-matter</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#1-2-4-layout-布局"><span class="nav-text">1.2.4 layout(布局)</span></a></li></ol></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-更换主题"><span class="nav-text">2. 更换主题</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#2-1-新建文章模板修改"><span class="nav-text">2.1 新建文章模板修改</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-2-添加404页面"><span class="nav-text">2.2 添加404页面</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-3-关于页面增加简历"><span class="nav-text">2.3 关于页面增加简历</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-4-数学公式渲染和代码高亮"><span class="nav-text">2.4 数学公式渲染和代码高亮</span></a><ol class="nav-child"><li class="nav-item nav-level-5"><a class="nav-link" href="#2-4-1-解决mathjax与代码高亮的冲突"><span class="nav-text">2.4.1 解决mathjax与代码高亮的冲突</span></a></li><li class="nav-item nav-level-5"><a class="nav-link" href="#2-4-2-加数学公式显示"><span class="nav-text">2.4.2 加数学公式显示</span></a></li></ol></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-5-增加建站时间"><span class="nav-text">2.5 增加建站时间</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-6-修改不蒜子初始化计数"><span class="nav-text">2.6 修改不蒜子初始化计数</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-8-添加评论插件"><span class="nav-text">2.8 添加评论插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-9-添加网易云音乐BGM"><span class="nav-text">2.9 添加网易云音乐BGM</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-10-博客音乐板块"><span class="nav-text">2.10 博客音乐板块</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-11-Valine评论模块修改"><span class="nav-text">2.11 Valine评论模块修改</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-12-添加博客动态标签"><span class="nav-text">2.12 添加博客动态标签</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-13-添加鼠标点击烟花爆炸效果"><span class="nav-text">2.13 添加鼠标点击烟花爆炸效果</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-14-添加页面樱花飘落动效"><span class="nav-text">2.14 添加页面樱花飘落动效</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-15-添加鼠标点击文字特效"><span class="nav-text">2.15 添加鼠标点击文字特效</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-16-添加页面雪花飘落动效"><span class="nav-text">2.16 添加页面雪花飘落动效</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-17-添加博客天气插件"><span class="nav-text">2.17 添加博客天气插件</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-18-修复-Valine-头像不显示问题"><span class="nav-text">2.18 修复 Valine 头像不显示问题</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-19-增加二级菜单"><span class="nav-text">2.19 增加二级菜单</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-参考链接"><span class="nav-text">3.参考链接</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

      

      <!-- 标签云 -->
      <!--
      
      <script type="text/javascript" charset="utf-8" src="/js/tagcloud.js"></script>
      <script type="text/javascript" charset="utf-8" src="/js/tagcanvas.js"></script>
      <div class="widget-wrap">
      <h3 class="widget-title">Tag Cloud</h3>
      <div id="myCanvasContainer" class="widget tagcloud">
          <canvas width="250" height="250" id="resCanvas" style="width=100%">
              <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/AlexNet/">AlexNet</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/C/">C++</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Cauchy-问题/">Cauchy 问题</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Cohen-Sutherland/">Cohen-Sutherland</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/DES/">DES</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/FCN/">FCN</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/GoogLeNetV2/">GoogLeNetV2</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/GoogLeNetV3/">GoogLeNetV3</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/GoogleNetV1/">GoogleNetV1</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hexo/">Hexo</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Hill/">Hill</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Liang-Barsky/">Liang-Barsky</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Markdown/">Markdown</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/NiN/">NiN</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Nodejs/">Nodejs</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/OpenGL/">OpenGL</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/ResNetV1/">ResNetV1</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/VGG/">VGG</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git/">git</a><span class="tag-list-count">3</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/git配置/">git配置</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/latex/">latex</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/matlab函数/">matlab函数</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/matlab绘图/">matlab绘图</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/texlive安装/">texlive安装</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/数据集/">数据集</a><span class="tag-list-count">1</span></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/热传导方程/">热传导方程</a><span class="tag-list-count">1</span></li></ul>
          </canvas>
      </div>
      </div>
      
      -->
      <!-- 标签云 -->

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
<div class="copyright">&copy; 2020 &mdash; <span itemprop="copyrightYear">2021</span>
  <span class="with-love">
       <i class="fa fa-heartbeat"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">戈孔明</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
    <span title="Site words total count">121.3k</span>
  
</div>

<!--









-->


        
<div class="busuanzi-count">
  <!--
  <script async src="https://dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script>
  -->
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>

  
    <span class="site-uv">
      <i class="fa fa-user"></i>访问人数
      <span class="busuanzi-value" id="busuanzi_value_site_uv"></span>
      人次
    </span>
  

  
    <span class="site-pv">
      <i class="fa fa-eye"></i>总访问量
      <span class="busuanzi-value" id="busuanzi_value_site_pv"></span>
      次
    </span>
  
</div>








        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
          <span id="scrollpercent"><span>0</span>%</span>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/jquery@2.1.3/dist/jquery.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/fastclick/1.0.6/fastclick.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.lazyload/1.9.3/jquery.lazyload.min.js"></script>
  

  
  
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.min.js"></script>
  

  
  
    <script type="text/javascript" src="//cdn.jsdelivr.net/npm/velocity-animate@1.2.1/velocity.ui.min.js"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  


  <script type="text/javascript" src="/js/src/affix.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/schemes/pisces.js?v=5.1.4"></script>



  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  













  <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
  <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
  <script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js"></script>
  <script type="text/javascript">
        var gitalk = new Gitalk({
          clientID: '6a4708bb548d9ee47cfd',
          clientSecret: '29a20b874fd47e6c4d1229c036d5e37beeda813d',
          repo: 'gkm0120.github.io',
          owner: 'gkm0120',
          admin: ['gkm0120'],
          id: md5(window.location.pathname),
          distractionFreeMode: 'true'
        })
        gitalk.render('gitalk-container')
       </script>



  

  <script type="text/javascript">
    // Popup Window;
    var isfetched = false;
    var isXml = true;
    // Search DB path;
    var search_path = "search.xml";
    if (search_path.length === 0) {
      search_path = "search.xml";
    } else if (/json$/i.test(search_path)) {
      isXml = false;
    }
    var path = "/" + search_path;
    // monitor main search box;

    var onPopupClose = function (e) {
      $('.popup').hide();
      $('#local-search-input').val('');
      $('.search-result-list').remove();
      $('#no-result').remove();
      $(".local-search-pop-overlay").remove();
      $('body').css('overflow', '');
    }

    function proceedsearch() {
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay"></div>')
        .css('overflow', 'hidden');
      $('.search-popup-overlay').click(onPopupClose);
      $('.popup').toggle();
      var $localSearchInput = $('#local-search-input');
      $localSearchInput.attr("autocapitalize", "none");
      $localSearchInput.attr("autocorrect", "off");
      $localSearchInput.focus();
    }

    // search function;
    var searchFunc = function(path, search_id, content_id) {
      'use strict';

      // start loading animation
      $("body")
        .append('<div class="search-popup-overlay local-search-pop-overlay">' +
          '<div id="search-loading-icon">' +
          '<i class="fa fa-spinner fa-pulse fa-5x fa-fw"></i>' +
          '</div>' +
          '</div>')
        .css('overflow', 'hidden');
      $("#search-loading-icon").css('margin', '20% auto 0 auto').css('text-align', 'center');

      $.ajax({
        url: path,
        dataType: isXml ? "xml" : "json",
        async: true,
        success: function(res) {
          // get the contents from search data
          isfetched = true;
          $('.popup').detach().appendTo('.header-inner');
          var datas = isXml ? $("entry", res).map(function() {
            return {
              title: $("title", this).text(),
              content: $("content",this).text(),
              url: $("url" , this).text()
            };
          }).get() : res;
          var input = document.getElementById(search_id);
          var resultContent = document.getElementById(content_id);
          var inputEventFunction = function() {
            var searchText = input.value.trim().toLowerCase();
            var keywords = searchText.split(/[\s\-]+/);
            if (keywords.length > 1) {
              keywords.push(searchText);
            }
            var resultItems = [];
            if (searchText.length > 0) {
              // perform local searching
              datas.forEach(function(data) {
                var isMatch = false;
                var hitCount = 0;
                var searchTextCount = 0;
                var title = data.title.trim();
                var titleInLowerCase = title.toLowerCase();
                var content = data.content.trim().replace(/<[^>]+>/g,"");
                var contentInLowerCase = content.toLowerCase();
                var articleUrl = decodeURIComponent(data.url);
                var indexOfTitle = [];
                var indexOfContent = [];
                // only match articles with not empty titles
                if(title != '') {
                  keywords.forEach(function(keyword) {
                    function getIndexByWord(word, text, caseSensitive) {
                      var wordLen = word.length;
                      if (wordLen === 0) {
                        return [];
                      }
                      var startPosition = 0, position = [], index = [];
                      if (!caseSensitive) {
                        text = text.toLowerCase();
                        word = word.toLowerCase();
                      }
                      while ((position = text.indexOf(word, startPosition)) > -1) {
                        index.push({position: position, word: word});
                        startPosition = position + wordLen;
                      }
                      return index;
                    }

                    indexOfTitle = indexOfTitle.concat(getIndexByWord(keyword, titleInLowerCase, false));
                    indexOfContent = indexOfContent.concat(getIndexByWord(keyword, contentInLowerCase, false));
                  });
                  if (indexOfTitle.length > 0 || indexOfContent.length > 0) {
                    isMatch = true;
                    hitCount = indexOfTitle.length + indexOfContent.length;
                  }
                }

                // show search results

                if (isMatch) {
                  // sort index by position of keyword

                  [indexOfTitle, indexOfContent].forEach(function (index) {
                    index.sort(function (itemLeft, itemRight) {
                      if (itemRight.position !== itemLeft.position) {
                        return itemRight.position - itemLeft.position;
                      } else {
                        return itemLeft.word.length - itemRight.word.length;
                      }
                    });
                  });

                  // merge hits into slices

                  function mergeIntoSlice(text, start, end, index) {
                    var item = index[index.length - 1];
                    var position = item.position;
                    var word = item.word;
                    var hits = [];
                    var searchTextCountInSlice = 0;
                    while (position + word.length <= end && index.length != 0) {
                      if (word === searchText) {
                        searchTextCountInSlice++;
                      }
                      hits.push({position: position, length: word.length});
                      var wordEnd = position + word.length;

                      // move to next position of hit

                      index.pop();
                      while (index.length != 0) {
                        item = index[index.length - 1];
                        position = item.position;
                        word = item.word;
                        if (wordEnd > position) {
                          index.pop();
                        } else {
                          break;
                        }
                      }
                    }
                    searchTextCount += searchTextCountInSlice;
                    return {
                      hits: hits,
                      start: start,
                      end: end,
                      searchTextCount: searchTextCountInSlice
                    };
                  }

                  var slicesOfTitle = [];
                  if (indexOfTitle.length != 0) {
                    slicesOfTitle.push(mergeIntoSlice(title, 0, title.length, indexOfTitle));
                  }

                  var slicesOfContent = [];
                  while (indexOfContent.length != 0) {
                    var item = indexOfContent[indexOfContent.length - 1];
                    var position = item.position;
                    var word = item.word;
                    // cut out 100 characters
                    var start = position - 20;
                    var end = position + 80;
                    if(start < 0){
                      start = 0;
                    }
                    if (end < position + word.length) {
                      end = position + word.length;
                    }
                    if(end > content.length){
                      end = content.length;
                    }
                    slicesOfContent.push(mergeIntoSlice(content, start, end, indexOfContent));
                  }

                  // sort slices in content by search text's count and hits' count

                  slicesOfContent.sort(function (sliceLeft, sliceRight) {
                    if (sliceLeft.searchTextCount !== sliceRight.searchTextCount) {
                      return sliceRight.searchTextCount - sliceLeft.searchTextCount;
                    } else if (sliceLeft.hits.length !== sliceRight.hits.length) {
                      return sliceRight.hits.length - sliceLeft.hits.length;
                    } else {
                      return sliceLeft.start - sliceRight.start;
                    }
                  });

                  // select top N slices in content

                  var upperBound = parseInt('1');
                  if (upperBound >= 0) {
                    slicesOfContent = slicesOfContent.slice(0, upperBound);
                  }

                  // highlight title and content

                  function highlightKeyword(text, slice) {
                    var result = '';
                    var prevEnd = slice.start;
                    slice.hits.forEach(function (hit) {
                      result += text.substring(prevEnd, hit.position);
                      var end = hit.position + hit.length;
                      result += '<b class="search-keyword">' + text.substring(hit.position, end) + '</b>';
                      prevEnd = end;
                    });
                    result += text.substring(prevEnd, slice.end);
                    return result;
                  }

                  var resultItem = '';

                  if (slicesOfTitle.length != 0) {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + highlightKeyword(title, slicesOfTitle[0]) + "</a>";
                  } else {
                    resultItem += "<li><a href='" + articleUrl + "' class='search-result-title'>" + title + "</a>";
                  }

                  slicesOfContent.forEach(function (slice) {
                    resultItem += "<a href='" + articleUrl + "'>" +
                      "<p class=\"search-result\">" + highlightKeyword(content, slice) +
                      "...</p>" + "</a>";
                  });

                  resultItem += "</li>";
                  resultItems.push({
                    item: resultItem,
                    searchTextCount: searchTextCount,
                    hitCount: hitCount,
                    id: resultItems.length
                  });
                }
              })
            };
            if (keywords.length === 1 && keywords[0] === "") {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-search fa-5x" /></div>'
            } else if (resultItems.length === 0) {
              resultContent.innerHTML = '<div id="no-result"><i class="fa fa-frown-o fa-5x" /></div>'
            } else {
              resultItems.sort(function (resultLeft, resultRight) {
                if (resultLeft.searchTextCount !== resultRight.searchTextCount) {
                  return resultRight.searchTextCount - resultLeft.searchTextCount;
                } else if (resultLeft.hitCount !== resultRight.hitCount) {
                  return resultRight.hitCount - resultLeft.hitCount;
                } else {
                  return resultRight.id - resultLeft.id;
                }
              });
              var searchResultList = '<ul class=\"search-result-list\">';
              resultItems.forEach(function (result) {
                searchResultList += result.item;
              })
              searchResultList += "</ul>";
              resultContent.innerHTML = searchResultList;
            }
          }

          if ('auto' === 'auto') {
            input.addEventListener('input', inputEventFunction);
          } else {
            $('.search-icon').click(inputEventFunction);
            input.addEventListener('keypress', function (event) {
              if (event.keyCode === 13) {
                inputEventFunction();
              }
            });
          }

          // remove loading animation
          $(".local-search-pop-overlay").remove();
          $('body').css('overflow', '');

          proceedsearch();
        }
      });
    }

    // handle and trigger popup window;
    $('.popup-trigger').click(function(e) {
      e.stopPropagation();
      if (isfetched === false) {
        searchFunc(path, 'local-search-input', 'local-search-result');
      } else {
        proceedsearch();
      };
    });

    $('.popup-btn-close').click(onPopupClose);
    $('.popup').click(function(e){
      e.stopPropagation();
    });
    $(document).on('keyup', function (event) {
      var shouldDismissSearchPopup = event.which === 27 &&
        $('.search-popup').is(':visible');
      if (shouldDismissSearchPopup) {
        onPopupClose();
      }
    });
  </script>





  

  

  
<script>
(function(){
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';        
    }
    else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>


  
  
  
  <link rel="stylesheet" href="/lib/needsharebutton/needsharebutton.css">

  
  
  <script src="/lib/needsharebutton/needsharebutton.js"></script>

  <script>
    
    
  </script>

  

  
  
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"]  ],
          processEscapes: true,
          skipTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code']
        }
      });
    </script>

    <script type="text/x-mathjax-config">
      MathJax.Hub.Queue(function() {
        var all = MathJax.Hub.getAllJax(), i;
        for (i=0; i < all.length; i += 1) {
          all[i].SourceElement().parentNode.className += ' has-jax';
        }
      });
    </script>
    <script type="text/javascript" src="//cdn.bootcss.com/mathjax/2.7.1/latest.js?config=TeX-AMS-MML_HTMLorMML"></script>
  


  

  


  <!-- Tidio 在线联系功能、鼠标点击特效、页面反馈...-->
  


  










  <script src="/js/src/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = true;
    POWERMODE.shake = false;
    document.body.addEventListener('input', POWERMODE);
  </script>



  <!-- 看板娘 -->
  <!--  -->

  <!-- 看板娘 -->
  <script async src="/live2d-widget/autoload.js"></script>

  
      <!-- aplayer音频播放 -->
      <link rel="stylesheet" href="/dist/APlayer.min.css">
      <div id="aplayer"></div>
      <script type="text/javascript" src="/dist/APlayer.min.js"></script>
      <script type="text/javascript" src="/dist/music.js"></script>
  

  <!-- 代码块复制功能 -->
  <script type="text/javascript" src="/js/src/clipboard.min.js"></script>
  <script type="text/javascript" src="/js/src/clipboard-use.js"></script>

  <!--share.js-->
  <link rel="stylesheet" href="/sharejs/css/share.min.css">
  <script src="/sharejs/js/social-share.min.js"></script>

  <!-- 模仿知乎卡片样式链接、崩溃欺骗特效 -->
  <!--<script type="text/javascript" src="/js/src/linkcard.js"></script>-->

  <!--崩溃欺骗 放在js文件最后-->
  <!--<script type="text/javascript" src="/js/src/crash_cheat.js"></script>-->



</body>
</html>
